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2005 年 以 后 ,互联 网 进入 Web 2.0 时 代 ,Web 应 用 大 量 涌现 ,网 页 不 再 只 是 
承载 单一 的 文字 和 图 片 , 各 种 富 媒 体 (Rich Media) 让 网 页 的 内 容 更 加 生动 ,网 页 上 
软件 化 的 交互 形式 为 用 户 提供 了 更 好 的 使 用 体验 。 在 Web 1.0 时 代 只 使 用 
Photoshop 和 Dreamweaver 等 工具 进行 网 页 开发 已 经 不 能 满足 需求 ,各 种 新 技术 得 
到 衍生 并 推广 ,形成 了 所 说 的 Web 技术 。Web 前 端 开发 技术 包括 三 个 要 素 : 
HTML、CSS 和 JavaScript, 在 开发 技术 上 更 接近 传统 的 网 站 后 台 开 发 。 其 主要 职能 
是 把 网 站 的 界面 更 好 地 呈现 给 用 户 , 但 整个 技术 体系 所 需 的 知识 涉及 艺术 类 、 计 算 
机 类 及 其 他 相关 学 科 , 既 有 具体 技术 ,又 有 抽象 的 理念 ,可 见 前 端 开发 的 难度 在 增 大 。 

前 端 设 计 师 这 个 职业 正 是 在 这 种 情况 下 产生 的 。 从 技术 角度 来 说 , HTML、 
CSS 和 JavaScript 是 必修 课 。 除 此 之 外 ,由 于 前 端 设计 师 既 要 与 上 游 的 交互 设计 
师 、 视 觉 设计 师 和 产品 经 理 沟通 ,又 要 与 下 游 的 服务 器 端 工程 师 沟通 ,因此 还 需要 
掌握 与 上 下 游 相关 的 技能 ,才能 得 以 胜任 本 岗位 工作 。 

本 书 主要 适用 于 应 用 型 本 科 院 校 和 职业 院 校 计算 机 类 相关 专业 的 前 端 技术 
教学 使 用 ,主要 应 用 的 前 端 开发 技术 有 HTML、CSS 和 jQuery( 一 种 js 库 )。 从 网 
页 制作 的 各 个 技术 入 手 ,以 项 目 为 载体 ,以 任务 为 单位 ,采用 理论 .实践 一 体 化 的 
方式 ,全 面 、 系 统 地 讲解 了 Web 前 端 开发 的 过 程 和 细节 。 

本 书 分 为 11 章 , 两 个 大 部 分 。 其 中 第 1 篇 主要 介绍 网 页 基础 知识 ,为 教材 前 
8 章 内 容 , 包 括 网 页 布局 基础 、 网 页 图 文 排版 .链接 与 导航 设计 、 网 页 栏目 设计 、 表 
单 页 面 设计 、 框 架 网 页 设计 、 应 用 jQuery、 移 动产 品 网 页 设计 。 第 2 篇 为 项 目 开 
发 ,为 教材 后 3 章 内 容 , 包 括 企业 宣传 网 站 一 一 舒适 家 居 网 、 彩 字 商 贸 公 司 网 站 、 弘 
时 美容 美发 公司 网 站 三 大 项 目 。 

本 书 由 刘 心 美 . 陈 义 辉 、 韩 宝玉 、 孙 文江 编著 ,技术 支持 来 自 于 盘古 网 络 ,全 书 
由 李 明 革 、 朴 仁 淑 主 审 ,并 在 编写 过 程 中 给 予 了 指导 和 帮助 。 
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第 1 局 
网 页 基础 知识 


网 页 布局 的 作用 在 于 将 网 页 的 各 个 元 素 进 行 合理 定位 ,主要 有 三 种 技术 ,分 别 是 表格 、 
DIV 十 CSS、 框 架 。 在 这 三 种 技术 中 ,表格 由 于 不 能 做 到 网 页 结构 与 样式 的 分 离 , 已 不 提倡 
使 用 ;框架 技术 由 于 不 能 做 到 对 网 页 进行 细 化 ,使 用 范围 被 限制 ;目前 主流 的 布局 技术 就 是 
DIV 十 CSS, 本 章 主 要 讲解 该 技术 的 相关 知识 与 布局 技术 。 

@@ee* 


本 章 要 点 


兰 、 三 栏 基础 布局 。 


1.1 Web 前端 技术 概述 


LL1 万维网 与 本 


最 早 的 网 络 构想 来 自 于 Tim Berners-Lee, 他 于 1984 年 在 欧洲 核子 物理 实验 创造 了 万 
维 网 ,万 维 网 梦想 建立 一 个 可 在 其 中 通过 分 享 信息 而 进行 通信 的 公共 信息 空间 ,同时 他 编写 
了 世界 上 第 一 个 客户 端 浏览 器 (World Wide Web) 和 第 一 个 Web 服务 器 httpd( 超 文本 传输 
协议 守护 进程 ) 。 

为 了 “引导 Web 发 挥 其 最 大 潜力 ”Tim Berners-Lee 组 织 成 立 了 World Wide Web 
Consortium 即 通常 所 说 的 W3C( 万 维 网 联盟 ) ,其 最 重要 的 工作 是 发 展 Web 规范 ( 称 为 推 
荐 ,Recommendations) ,这 些 规范 描述 了 Web 的 通信 协议 (如 HTML 和 XHTML) 和 其 他 
的 构建 模块 。 

Tim Berners-Lee 的 构想 得 到 全 世界 的 认可 ,在 短 短 的 三 十 年 时 间 里 , Web 技术 得 以 快 
速 发 展 ,Web 的 工作 原理 如 图 1-1 所 示 。 

Web 技术 得 以 广泛 流行 的 原因 在 于 Web 技术 特点 具有 以 下 几 点 。 

。 色彩 丰富 、 图 形 化 的 浏览 界面 。 
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图 1-1 Web 工作 原理 示意 图 


。 利 用 WWW 进行 界面 浏览 ,脱离 了 计算 机 操作 系统 的 限制 。 

。 利用 超 链接 进行 交互 ,实现 对 大 量 信息 的 有 效 筛 选 。 

。 信息 内 容 采用 分 布 式 结构 存储 ,降低 了 对 所 占 空间 的 要 求 ,从 用 户 角度 来 看 这 些 信 
息 是 一 体 的 。 
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随 着 Internet 技术 飞速 发 展 与 普及 , Web 技术 也 在 不 断 更 新 与 前 进 ,开发 具有 用 户 动 
态 交 互 ,多 媒体 应 用 的 新 一 代 Web 网 站 成 为 近 几 年 研究 与 应 用 的 热点 ,这 就 要 求 掌 握 
HTML CSS JavaScript\DOM、AJAX 等 组 合 技术 。HTML、CSS、JavaScript 被 称 为 Web 
标准 三 剑客 。 由 于 JavaScript、AJAX 编码 较 复杂 ,对 前 端 设计 人 员 来 说 会 有 较 大 的 难度 。 
jQuery 技术 的 出 现 解决 了 这 个 问题 , 它 对 JavaScript、AJAX 等 技术 进行 了 组 合 ,减少 了 代 
码 编写 的 难度 。 因 此 ,在 本 书 中 将 以 jQuery 来 代替 JavaScript 技术 。 

HTML: HTML 指 的 是 超 文本 标记 语言 (HyperText Markup Language) , 它 不 是 一 种 
编程 语言 ,而 是 一 种 标记 语言 ,由 一 套 固定 的 标记 组 成 。 

CSS: CSS 是 指 层 秋 样式 表 (Cascading Style Sheets) ,用 来 定义 如 何 显示 HTML 元 素 ， 
样式 通常 存储 在 样式 表 中 。 

jQuery: jQuery 是 一 个 轻 量 级 的 JavaScript 库 , 它 极 大 地 简化 了 JavaScript 编程 上 且 易 
于 掌握 和 学 习 。 
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网 站 是 指 互 联网 上 能 够 提供 信息 发 布 方 面 功能 的 服务 技术 。 它 由 域名 ( 即 网 站 IP 地 
址 ) 和 网 站 空间 构成 。 包 括 主页 和 子 页 等 文件 ,相互 之 间 通 过 执行 WWW 服务 来 进行 相互 
链接 。 

网 页 是 构成 网 站 的 基本 元 素 , 是 承载 各 种 网 站 应 用 的 平台 ,通常 是 HTML 格式 ,扩展 
名 为 . html/htm、. asp、 php 等 。 网 页 内 容 主 要 由 文本 、 图 片 、 多 媒体 等 多 种 元 素 组 成 ,主体 
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组 成 元 素 如 下 。 

Logo( 网 站 标志 ) ,类 似 于 企业 的 商标 ,用 于 表达 网 站 的 理念 。 从 网 页 角度 来 说 ,Logo 
是 互联 网 上 各 个 网 站 用 来 与 其 他 网 站 链接 的 图 形 标志 ;网 站 的 标志 ,具有 表达 意义 、 情 感 和 
指令 行动 等 作用 。 

网 站 导航 ,体现 在 页 面 上 就 是 链接 。 链 接 的 作用 在 于 实现 浏览 和 使 用 网 站 , 它 可 以 让 用 
户 在 网 页 间 跳 转 更 方便 ,也 可 以 表达 出 页 面 与 页 面 、 页 面 与 内 容 之 间 的 关系 。 为 了 使 浏览 者 
不 在 网 站 中 迷失 方向 ,网 站 导航 设计 要 清晰 .明了 。 

按钮 ,是 一 种 能 在 单 击 时 产生 事件 的 控件 。 它 的 设计 形式 多 样 , 导 航 条 也 是 一 种 特殊 的 
按钮 。 
文本 ,是 网 页 中 最 基本 的 元 素 之 一 。 可 根据 页 面 需要 对 字体 大 小 、 颜 色 ,边框 等 进行 自 
由 设计 ,文本 字体 选择 的 原则 是 能 被 浏览 器 兼容 。 如 所 选 字体 仅 为 一 种 或 几 种 浏览 器 能 显 
示 时 建议 将 文本 进行 图 片 化 。 

图 片 ,在 网 页 中 的 地 位 与 文本 相同 , 仅 有 文本 的 网 页 显得 呆板 ; 仅 有 图 片 的 网 页 显得 空 
旷 , 缺 少 说 服 力 。 因 此 网 页 设计 的 原则 之 一 就 是 图 文 并 茂 。 在 网 页 中 图 片 常 采用 JPG、 
PNG 等 格式 。 

表单 ,是 网 页 进行 交互 的 主要 手段 。 浏 览 者 通过 表单 输入 文本 、 单 击 选 项 等 方式 把 自己 
的 信息 传递 给 服务 器 ,以 获取 所 需要 的 信息 或 由 服务 器 完成 某 种 服务 。 

动画 ,是 网 页 上 最 活跃 的 元 素 。 通 过 动画 将 音频 、 视 频 等 多 媒体 元 素 与 JavaScript 等 脚 
本 语言 相 结合 , 具 有 多 变样 式 、 炫 丽 画 面 、 优 美音 乐 的 动画 可 以 让 浏览 者 耳目 一 新 。 

当然 除了 上 述 元 素 外 ,还 用 如 计算 器 、 字 幕 等 元 素 ,关键 在 于 网 页 设计 时 要 注意 页 面 协调 。 


1.2 认识 HTML 
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HTML 是 一 种 规范 ,一 种 标准 ,一 种 标记 语言 。 它 通过 标记 符号 来 标记 要 显示 的 网 页 
中 的 各 个 部 分 。 浏 览 器 根据 标记 ,确定 不 同 内 容 要 显示 的 样式 。 如 文字 如 何 显示 ,图 片 如 何 
排版 等 。 在 浏览 网 页 文件 时 ,浏览 器 按 顺序 对 标记 符号 进行 解释 执行 。 但 需要 注意 的 是 由 于 
浏览 器 版 本 众多 ,同一 个 标记 符号 会 有 不 完全 相同 的 解释 ,也 就 是 常 说 的 浏览 器 兼容 问题 。 

HTML 称 为 超 文本 标记 语言 ,是 因为 文本 中 包含 了 所 谓 “ 超 级 链接 ”点 。 所 谓 超级 链 
接 , 就 是 一 种 URL 指针 ,通过 点 击 它 ,可 以 使 浏览 器 方便 地 获取 新 的 网 页 ,完成 从 一 个 页 面 
到 另 一 个 页 面 的 跳 转 。 因 此 ,HTML 是 Web 编程 的 基础 ,也 就 是 说 万 维 网 是 建立 在 超 文 本 
基础 之 上 的 。 

回顾 HTML 的 历史 ,最 早 的 HTML 2.0 版 本 是 从 IETF( 互 联网 工程 任务 组 ) 推 出 的 ， 
到 后 来 W3C 取代 IETF 的 角色 ,成 为 HTML 的 标准 组 织 ,HTML 的 版 本 被 频繁 修改 ,从 
HTML 2.0 直到 HTML 5 主要 经 历 了 三 次 大 的 变化 。 

HTML 在 HTML 4.01 之 后 的 第 一 个 修订 版 本 就 是 XHTML 1.0( 扩 展 ) ,当然 也 有 人 
将 之 解读 为 “eXtreme”( 极 端 ) 。 

HTML 是 指 超 文本 标记 语言 ,是 一 种 文本 文件 。 
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XHTML 是 更 严谨 更 纯净 的 HTML 版 本 ,其 中 XX 代表 “eXtensible”。XHTML 1.0 是 
基于 HTML 4.01 推出 的 ,没有 引入 任何 新 标记 或 属性 。 与 HTML 4. 01 唯一 的 区 别 是 语 
法 。HTML 对 语法 比较 随便 ,而 XHTML 则 要 求 XML 般 的 严格 语法 。 如 XHTML 需要 
区 别 大 小 写字 母 ,而 HTML 则 不 需要 进行 区 别 。 

HTML 5 是 下 一 代 的 HTML, 仍 处 于 完善 中 。 
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一 个 完整 的 HTML 文档 由 头 部 head 和 主体 body 两 部 分 组 成 。 在 头 部 标记 中 可 以 定 
义 网 页 标题 链接 样式 表 、 加 载 动态 代码 等 ,不 在 网 页 中 显示 ;在 主体 标记 中 定义 的 内 容 如 段 
落 . 超 链接 .表单 等 网 页 元 素 ,主体 内 容 会 在 网 页 中 显示 。 


【知识 基础 】 


关于 HTML 文档 结构 标记 。 

去 html 二 标记: 所 有 的 HTML 代码 都 包含 在 二 html 二 标记 对 之 间 。 

过 head 标记 : HTML 文档 的 头 部 标记 。 它 描述 文档 的 各 种 属性 和 信息 ,包括 文档 的 
标题 .提供 元 信息 .存放 可 以 引用 脚本 .引用 样式 表 、 脚 本 文件 等 文档 。 绝 大 多 数 文档 头 部 包 
含 的 数据 都 不 会 真正 作为 内 容 进 行 显示 。 

所 body 二 标记 : 网 页 内 容 放置 区 域 。 它 包含 文档 的 所 有 内 容 如 文本 ` 超 链接 .图像 . 表 
格 和 列表 等 。 

【任务 实施 】 

案例 ”用 文本 文件 创建 我 的 第 一 个 网 页 index. html。 

任务 1 编写 网 页 index. html( 其 他 文本 编辑 器 ) 。 


步 又 1 新 建文 本 文件 index. txt。 
步骤 2 打开 index. txt, 手 写 代 码 如 下 : 


<htm> 
二 页 面 的 标题 - Windows Internet E 
ARPRAN 二 
<titley 页 面 的 标题 < /title> ET 
文件 EE 编辑 于) 查看 WW) 收 茂 来) 工具 CI) 帮助 人 0 
机 宾 收 京 天 | 次 四 Yindows 加] Yinaovs Medis 站 | 
<body> [Pi 篇 二 口 
这 是 我 的 第 一 个 页 面 。<b> 这 是 粗 体 文 
这 是 我 的 第 一 个 页 面 。 这 是 粗 体 文本 。 
本 。</b> 
< /body> 
</htnl> 


步骤 3 保存 index. txt, 关 闭 该 文件 。 

步骤 4 修改 index. txt 的 扩展 名 为 . html 
或 . htm。 吕 
任务 2 在 浏览 器 中 测试 效果 .如 图 1-2 


所 示 。 1-2 一 个 简单 HTML 网 页 显示 效果 


1.3 CSS 样 式 


CSS 是 指 层 秋 样式 表 (Cascading Style Sheets) ,简称 样式 表 。 最 初 建议 提出 于 1994 年 ,于 
1996 年 12 月 ,W3C 组 织 推出 CSS 第 一 版 本 ,到 目前 为 止 版 本 有 CSS 1. 0、CSS 2. 0、CSS 3. 0。 
与 传统 的 TABLE 网 页 布局 相 比 ,采用 CSS 十 DIV 进行 网 页 重 构 有 以 下 三 大 显著 优势 。 


1 表现 和 内 容 相 分 离 
所 谓 内 容 , 是 通过 HTML 文件 存放 网 页 相关 信息 ;表现 是 通过 CSS 将 样式 设计 部 分 剥 
离 出 来 放 在 一 个 独立 样式 文件 中 ,使 页 面 对 搜 索引 擎 更 加 友好 。 


2 提高 页 面 浏览 速度 
对 于 同一 个 页 面 视觉 效果 ,采用 CSS 十 DIV 重 构 的 页 面容 量 要 比 TABLE 编码 的 页 面 文件 容 
量 小 得 多 ,前 者 一 般 只 有 后 者 的 1/2 大 小 。 因 此 ,浏览 器 就 不 需要 去 编译 大 量 宛 长 的 标签 。 


3 易于 维护 和 改版 
相对 于 传统 HTML 的 表现 而 言 ,CSS 能 够 对 网 页 中 对 象 的 位 置 排 版 进行 像素 级 的 精 
确 控制 ,只 要 简单 修改 几 个 CSS 文件 就 可 以 重新 设计 整个 网 站 的 页 面 。 
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样式 表 定 义 如 何 显 示 HTML 元 素 。 通 过 编辑 一 个 简单 的 CSS 文档 ,能 够 为 每 个 
HTML 元 素 定义 样式 ,并 将 之 应 用 于 你 希望 的 任意 多 的 页 面 中 。 


【知识 基础 】 


样式 表 允 许 以 多 种 方式 规定 样式 信息 , 当 同 一 个 HTML 元 素 被 不 止 一 个 样式 定义 时 ， 
一 般 而 言 ,所 有 的 样式 会 根据 下 面 的 规则 层 生 于 一 个 新 的 虚拟 样式 表 中 。 

(1) 浏览 器 缺 省 设置 。 

(2) 外 部 样式 表 。 

(3) 内 部 样式 表 ( 位 于 二 head 二 标签 内 部 )。 

(4) 内 联 样 式 ( 在 HTML 元 素 内 部 )。 

其 中 ,内 联 样式 拥有 最 高 的 优先 权 , 它 优先 于 内 部 样式 表 、 外 部 样式 表 或 浏览 器 中 的 样 
式 声明 。 读 到 一 个 样式 表 时 ,浏览 器 会 根据 它 来 格式 化 HTML 文档 。 在 下 面 的 三 个 案例 
中 ,将 采用 外 部 样式 表 、 内 部 样式 表 、 内 联 样式 表 。 实 现 如 图 1-3 到 图 1-4 所 示 的 效果 。 


口 应 用 样式 前 区 


创建 内 联 样式 表 


图 1-3 应 用 样式 前 效果 1-4 应 用 样式 后 效果 
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【任务 实施 】 


案例 1 创建 外 部 样式 表 。 

当 需 要 将 样式 应 用 于 很 多 页 面 时 ,外 部 样式 表 是 理想 的 选择 。 在 使 用 外 部 样式 表 的 情 
况 下 ,你 可 以 通过 改变 一 个 文件 来 改变 整个 站 点 的 外 观 。 外 部 样式 表 应 该 以 . css 作为 扩展 
名 进行 保存 ,可 以 在 任何 文本 编辑 器 中 进行 编辑 。 下面 是 一 个 样式 表 文 件 mystyle. css 的 
例子 。 

任务 1 编写 网 页 testl. html。 

步骤 1 新 建站 点 test。 

步骤 2 在 test 站 点 中 新 建 网 页 文件 testl. html。 

步骤 3 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标记 之 间 。 

步骤 4 添加 p 标 记 内 容 如 下 : 

<body> 

< 户 创 建 外 部 样式 表 < /p> 

< /body> 

任务 2 编写 网 页 testl. html 的 样式 表 test1CSS. css。 

步骤 1 在 test 站 中 新 建 test1CSS. css 文件 。 

步骤 2 打开 testlCSS. css, 输 入 样式 内 容 如 下 : 


body { 
background- color:# O0c; 
} 
p 1{ 
fcnt- family:" 黑 体 ”… 
font- size:20px; 
} 
任务 3 实现 testl. html 与 样式 表 test1CSS, css 的 关联 。 
鼠标 定位 在 HTML 文档 的 一 head 盖 一 /head 盖 标记 之 间 ,添加 关联 。 


<head> 
< link rel= "stylesheet" type= "text/css" href- "mystyle.css" /> 

< /head> 

最 终 效果 如 图 1-4 所 示 。 

案例 2 创建 内 部 样式 表 。 

当 单 个 文档 需要 特殊 的 样式 时 ,就 应 该 使 用 内 部 样式 表 。 创 建 的 方式 是 使 用 二 style 二 
标签 在 文档 头 部 定义 内 部 样式 表 。 

任务 1 写 网 页 test2. html。 

步骤 1 打开 站 点 test。 

步骤 2 在 test 站 点 中 新 建 网 页 文件 test2. html。 

步骤 3 鼠标 定位 在 HTML 文档 的 二 body 盖 过 /body> 标 记 之 间 。 
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步骤 4 添加 pb 标记 内 容 如 下 : 全 
<body> 
<E> 创 建 外 部 样式 表 < /p> 
< /body> 


任务 2 编写 网 页 test2. html 的 内 部 样式 表 。 
鼠标 定位 在 HTML 文档 的 二 head 记 二 /head 二 标记 之 间 , 添 加 样式 代码 如 下 : 


<head> 
< style type= "text/css"> 
bedy { 
background- color:# OCC7 
} 
p 1{ 
font- family:" 黑 体 ” 
font- size:20px; 
} 
< /style> 
< /head> 


最 终 效果 如 图 1-4 所 示 。 

案例 3 创建 内 联 样 式 表 。 

内 联 样 式 仅 在 一 个 元 素 上 应 用 一 次 ,由 于 该 样式 将 表现 和 内 容 进 行 了 混杂 ,会 损失 掉 样 
式 表 的 许多 优势 。 因 此 ,用 于 单个 网 页 元 素 样式 测试 ,请 慎 用 。 使 用 内 联 样式 ,只 需要 在 相 
关 的 标签 内 使 用 样式 (style) 属 性 即 可 。 

任务 1 编写 网 页 test3. html。 

步骤 1 打开 站 点 test。 

步骤 2 在 test 站 点 中 新 建 网 页 文件 test3. html。 

步骤 3 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标记 之 间 。 

步骤 4 添加 p 标 记 内 容 如 下 : 

<body> 

< 户 创 建 外 部 样式 表 < /p> 

< /body> 

任务 2 在 标签 body、p 上 添加 样式 内 容 。 

步骤 ”在 相关 标签 的 开始 标签 中 添加 样式 。 


<body style= "background color:# C00C;"> 
<p style= "font- family:' 黑 体 '; font- size:20px;"> 创 建 内 联 样式 表 < /p> 
< /body> 
最 终 效果 如 图 1-4 所 示 。 
在 前 面 的 三 个 任务 中 ,利用 外 部 样式 、 内 容 样式 、 内 联 样 式 三 种 技术 设计 CSS 样式 , 关 
于 这 三 种 技术 的 选择 问题 ,需要 根据 实际 情况 进行 处 理 。 一 般 来 讲 , 外 部 样式 是 最 佳 方案 ， 
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内 容 样式 和 内 联 样式 多 用 于 样式 表 的 自我 调试 过 程 。 
上 S25 关于 选择 器 


要 使 用 CSS 对 HTML 网 页 元 素 实现 一 对 一 ,一 对 多 等 多 种 控制 ,就 需要 利用 CSS 选择 
器 来 对 HTML 页 面 中 的 元 素 进行 选择 。CSS 选择 器 的 语法 由 选择 器 、 属 性 和 值 三 部 分 构 
成 ,其 语法 格式 为 

选择 符 (selector) {属性 (property) : 属性 值 (value)} 

其 中 ,选择 符 用 于 确定 样式 所 应 用 网 页 元 素 的 部 分 ,通常 是 要 定义 的 HTML 元 素 或 标 
签 ;样式 声明 包括 属性 和 属性 值 两 部 分 , 且 属 性 和 属性 值 用 冒号 分 开 , 并 由 花 括 号 包围, 属性 
说 明 元 素 的 表现 形式 (颜色 、 位 置 等 ), 属 性 值 设置 了 所 选 元 素 的 相关 属性 的 特定 样式 。 在 
CSS 中 有 多 种 选择 符 ,下 面 通过 案例 的 方式 逐一 进行 讲解 。 


【知识 基础 】 


(1) 全 体 选择 符 : 全 体 选择 符 用 一 个 * ”来 表示 ,作用 类 似 于 通配符 ,表示 所 选 范 围 内 
的 所 有 元 素 。 例 如 ， 


* {font- size:13px;} 

该 代码 将 当前 网 页 中 所 有 文字 的 大 小 设 为 13 像素 。 

(2) HTML 标记 选择 器 : 针对 HTML 标记 的 样式 设置 。 例 如 : 
body{color:red;} 


该 代码 指定 了 HTML 标记 body 中 的 color( 字 体 颜 色 ) 属 性 的 值 为 red( 红 色 )。 

(3) 类 选择 器 : 把 相同 元 素 分 类 定义 为 不 同 的 样式 ,在 类 名 称 前 面 添加 一 个 “。” 号 。 
表示 主要 针对 自 定义 的 类 。 

如 在 HTML 代码 中 有 两 个 p 标记 ,字体 分 别 为 红色 和 绿色 ,由 于 是 同一 标记 ,如 果 用 HTML 
标记 选择 器 的 方法 , 则 显示 效果 会 相同 。 此 时 ,可 以 用 类 选择 器 的 方法 表示 。 举 例如 下 。 

HTML 代码 如 下 : 

<P class= "red"> 要 显示 为 红色 !< /p> 

<p class- "green"> 要 显示 为 绿色 !< /p> 


CSS 样式 代码 如 下 : 


.red{ 
Color:# 004444; 


这 样 ,同一 标记 就 显示 出 了 不 同 的 效果 。 
(4) id 选择 器 : 用 来 对 单一 元 素 定义 单独 的 样式 ,在 类 名 前 要 添加 “#”。 同 样 实现 上 
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面 的 效果 ,用 id 选择 器 方法 举例 如 下 。 
HTML 代码 如 下 : 


<P id= "cred"> 要 显示 为 红色 !< /p> 
<P id "ogreen"> 要 显示 为 绿色 !< /p> 


CSS 样式 代码 如 下 : 


#cred{ 

Color:# 004444; 
} 
# ogreen{ 

color:# 095455; 
} 


此 时 ,同样 会 产生 与 前 面相 同 的 效果 。 

id 选择 器 与 类 选择 器 的 区 别 在 于 唯一 性 。 即 在 html 结构 代码 中 ,类 选择 器 class 后 的 
名 称 可 以 有 相同 的 多 个 ;而 在 id 选择 器 中 ,id 属性 后 的 名 称 强调 唯一 性 ,不 可 重复 。 因 为 
JavaScript 脚本 将 通过 id 属性 值 来 调用 该 div。 

(5) 伪 类 及 伪 对 象 选择 符 : 一 组 CSS 预定 义 的 类 和 对 象 ,不 需要 进行 id\class 属性 的 声明 。 

锚 的 伪 类 : 最 常用 的 是 4 类 A 元 素 的 伪 类 ,用 于 表示 动态 链接 的 4 种 状态 : link( 未 访问 
时 的 状态 ) ,visited( 已 访问 过 的 状态 ) .hover( 鼠 标 停留 状态 ) ,active( 鼠 标 按 下 时 的 状态 )。 


a:link {color: # FF0000} /* 未 访问 时 的 状态 * / 

a:visited {color: # 00FFOO} /* 已 访问 过 的 状态 * / 

a:hover {color: # FEFOOFF} /* 鼠标 停留 状态 * / 

a:active {color: # 0000FF} /* 鼠标 按 下 时 的 状态 * / 
【任务 实施 】 


案例 ”简单 的 诗词 欣赏 页 。 

通过 本 节 所 讲解 的 选择 器 ,可 以 实现 使 同一 种 类 的 网 页 元 素 呈 现 多 种 状态 。 在 下 面 案 
例 中 针对 同 状态 的 文本 ,利用 不 同 选择 符 ,使 之 出 现 多 种 变化 。 

任务 1 编写 网 页 test4. html。 

步 双 1 打开 站 点 test。 

步骤 2 在 test 站 点 中 新 建 网 页 文件 test4. html。 

步骤 3 鼠标 定位 在 HTML 文档 的 <body 之 一 /body 二 标记 之 间 , 添 加 代码 如 下 


<body> 
<center> 
<ahre 全 嘎 必 春晓 </a> 
<p class= "atest"> 春 眠 不 觉 晓 ,< /p> 
<p id "ahead"> 处 处 闻 啼 鸟 。< /p> 
<p class= "atest"> 夜 来 风雨 声 ,< /p> 
<P> 花 落 知 多 少 。< /p> 
< /center> 
< /body> 


cao 
加) 
任务 2 编写 网 页 test4. html 的 内 部 样式 表 。 
步骤 “鼠标 定位 在 HTML 文档 的 一 head> 一 /head 二 标记 之 间 , 添 加 如 下 样式 代码 。 


<head> 
< style type= "text/css"> 
*{ 
font- size:20px; 
font- family:" 微 软 雅 黑 "; 
} 
body{ 
background- color:# C90; 
} 
#ahead{ 
font- family:" 黑 体 "… 
} 
-atest{ 
Color:# 666; 
} 
a:link{ 
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} 


a:visited{ 
color:red; 

} 

a:visited{ 
color:black; 

} 

< /style> 

< /head> 图 1-5 简单 的 诗词 欣赏 效果 图 


任务 3 在 浏览 器 中 测试 效果 ,如 图 1-5 所 示 。 
1.33” 框 模型 介绍 


所 谓 的 框 模 型 ,是 在 1996 年 由 W3C 推出 CSS 时 提出 的 Box Model( 中 文 名 称 为 盒 模 
a 型 / 框 模型 )。 框 模型 规定 : 网 页 中 的 所 有 元 素 对 象 都 被 
有 放 在 一 个 方 框 里 ,设计 师 可 以 通过 CSS 来 控制 该 方 框 的 
ei) 显示 属性 。 框 模型 是 CSS 布局 的 基础 ,规定 了 网 页 元 素 
如 何 显 示 以 及 元 素 间 的 相互 关系 。 由 CSS 定义 的 所 有 
元 素 都 可 以 拥有 像 方 框 一 样 的 外 形 和 平面 空间 , 即 都 包 
含 边界 边框 ` 补 白 \ 内 容 区 域 和 背景 (包括 背景 色 和 背 
景 图 像 ) ,其 规范 了 网 页 元 素 的 显示 基础 ,可 以 将 框 模型 
用 图 的 方法 展示 出 来 ,如 图 1-6 所 示 。 页 面 元 素 所 占 的 
实际 宽度 为 : 
1-6 盒子 模型 示意 图 margin 一 left 十 border 一 left 十 padding 一 left 十 
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width 十 padding 一 right 十 border 一 right 十 margin 一 right 

同 理 ,页 面 元 素 所 占 的 实际 高 度 为 : 

margin 一 top 十 border 一 top 十 padding 一 top 十 height 十 padding 一 bottom 十 border 一 
bottom 十 margin 一 bottom 

从 框 模型 可 以 体会 出 : 在 CSS 中 一 些 元 素 皆 为 方 框 。 

根据 方 框 所 占据 的 空间 进行 分 类 ,分 为 以 下 两 大 类 。 

块 级 框 : 从 上 到 下 一 个 接 一 个 地 排列 , 框 之 间 的 垂直 距离 是 由 框 的 垂直 外 边 距 计 算出 
来 。 如 常用 的 div、hl 或 p 元素。 

行内 框 : 在 一 行 中 水 平 布 置 。 可 以 使 用 水 平 内 边 距 .边框 和 外 边 距 调 整 它们 的 间距 。 
但 是 ,垂直 内 边 距 ,边框 和 外 边 距 不 影响 行内 框 的 高 度 , 行 框 的 高 度 总 是 足以 容纳 它 包含 的 
所 有 行内 框 。 如 常用 的 span 和 strong 等 元 素 。 
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所 谓 CSS 定位 ,是 指 利用 CSS 样式 定位 元 素 在 网 页 中 的 位 置 。CSS 定位 的 基本 思想 就 
是 允许 定义 元 素 框 相对 于 其 正常 位 置 应 该 出 现 的 位 置 ,或 者 相对 于 父 元 素 、 另 一 个 元 素 甚 至 
浏览 器 窗口 本 身 的 位 置 。 
【知识 基础 】 

在 这 里 首先 要 和 弄 清 两 个 概念 : 普通 流 、 浮 动 。 

普通 流 : 除非 专门 指定 ,否则 所 有 框 都 在 普通 流 中 定位 ,普通 流 中 的 元 素 的 位 置 由 元 素 
在 X(CHTML) 中 的 位 置 决定 。 块 级 框 从 上 到 下 一 个 接 一 个 地 排列 ,行内 框 在 一 行 中 水 平 
布置 。 

浮动 : 通过 设置 浮动 ,可 以 实现 元 素 框 向 左 或 向 右 移动 ,直到 它 的 外 边缘 碰 到 包含 框 或 
另 一 个 浮动 框 的 边框 为 止 。 可 见 浮动 框 已 经 脱离 了 文档 的 普通 流 , 对 于 普通 流 块 框 来 说 , 浮 
动 框 就 像 不 存在 一 样 。 

和 弄 清 了 元 素 在 浏览 器 中 的 状态 后 ,可 以 通过 position 属性 的 四 种 状态 ,来 改变 元 素 框 的 
状态 ,具体 如 表 1-1 所 示 。 


表 1-1 position 属性 表 


属性 名 属 性 值 
生成 绝对 定位 的 元 素 , 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进行 定位 


absolute | 元 素 的 位 置 通过 left\top right 以 及 bottom 属性 进行 规定 
cd 生成 绝对 定位 的 元 素 , 相 对 于 浏览 器 窗口 进行 定位 
元 素 的 位 置 通过 left top right 以 及 bottom 属性 进行 规定 
udve | 生成 相对 定位 的 元 素 ,相对 于 其 正常 位 置 进行 定位 


因此 ,left:20 会 向 元 素 的 LEFT 位 置 添加 20 像素 
static 默认 值 ,没有 定位 ,元 素 出 现在 正常 的 流 中 (忽略 top .bottom ,left ,right 或 者 z-index 声明 ) 
inherit 规定 应 该 从 父 元 素 继承 position 属性 的 值 
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【任务 实施 】 


案例 ”简单 的 鼠标 跳动 效果 。 
从 表 1-1 可 以 看 出 ,CSS 定位 关键 在 于 把 握 四 个 关键 概念 : 普通 流 、 正 常 流 、 相 对 定位 、 


绝对 定位 。 同 时 结合 灵活 display 属性 实现 块 级 元 素 和 行 元 素 的 相互 变化 ,利用 CSS 也 可 
以 制作 出 一 些 动画 ,以 丰富 页 面 的 效果 。 


任务 1 编写 网 页 test5. html。 

步骤 1 打开 站 点 test。 

步骤 2 在 test 站 点 中 新 建 网 页 文件 test5. html。 

步骤 3 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标记 之 间 , 添 加 代码 如 下 : 


<body> 
<div id "oon"> 
<ahref= 啡 吃 首 grbsp;&nbsp;sgnbsp;gnbsp; 页 < /a> 
<ahre 全 只 性 企 业 动态 </a> 
<ahref= 哇 > 企业 新 闻 < /a> 
<a href= 叶 吃 联 系 方式 < /a> 
<ahre 全 啡 性 友情 链接 < /a> 
</div> 
< /body> 


任务 2 编写 网 页 test4. html 的 内 部 样式 表 。 
步骤 鼠标 定位 在 HTML 文档 的 二 head 记 二 /head 二 标记 之 间 , 添 加 样式 代码 如 下 : 


<head> 

< style type= "text/css"> 

#con{ 
width:600px; 
height:40pxy 
background- color:# 333; 
text— align:centery 

} 

a:link,a:visited{ 
Color:# FFF; 
text- decoration:none; 
display:block; 
width:80px; 
height:40px; 
float:left; 
line~ height :40px; 

} 

a:hover{ 
Color:# FF3; 
position:relative; 
top:3px; 


left:3px; 
} 
< /style> 
< /head> 


任务 3 在 浏览 器 中 测试 效果 ,如 图 1-7 所 示 。 
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图 1-7 简单 的 鼠标 跳动 效果 图 


1.4 关于 网 页 布局 


14 网 页 布局 的 相关 技术 
所 谓 网 页 布局 ,就 是 对 文字 、 图 片 ,动画 等 网 页 元 素 , 设 置 其 位 置 ,大 小 .形状 等 最 佳 的 表 
现 方式 呈现 给 浏览 者 。 但 在 网 页 进行 布局 时 ,要 注意 网 页 布局 的 基本 要 素 。 
页 面 尺 寸 , 网 页 的 页 面 尺寸 受到 显示 器 分 辩 率 的 限制 ,所 能 应 用 的 实际 尺寸 要 去 掉 浏 
览 器 所 占 去 的 部 分 空间 ,因此 网 页 尺寸 规格 如 表 1-2 所 示 。 
表 1-2 网 页 尺寸 规格 表 


显示 器 分 辩 率 实际 页 面 尺寸 显示 器 分 辩 率 实际 页 面 尺 十 
800X600 像素 780X428 像素 640X480 像素 620X311 像素 
1024X768 像素 1007X600 像素 


由 于 现在 显示 器 分 辩 率 不 断 增 大 ,1024X768 像素 显示 器 分 辩 率 已 是 设计 的 主流 。 

版 面 结构 设计 : 网 页 是 一 种 通过 传媒 手段 ,利用 视觉 和 听觉 方式 来 传递 信息 的 。 因 此 
设计 的 出 发 点 , 既 要 注重 信息 的 价值 性 ,又 要 注重 页 面 的 艺术 性 ,这 就 需要 在 版 面 结构 设计 
方面 下 功夫 。 网 页 的 版 面 结构 设计 类 型 常规 的 有 骨骼 型 .曲线 型 .倾斜 型 等 。 其 网 页 元 素 主 
体 结构 分 为 网 页 头 部 、 网 页 主体 内 容 、 网 页 脚 部 三 大 区 域 块 。 

网 页 头 部 又 可 称 页 眉 。 作 用 是 定义 页 面 的 主题 。 常 放置 网 站 的 Logo、 旗 帜 广告 ,导航 
等 关键 信息 ,使 浏览 者 知道 本 站 点 的 内 容 。 从 设计 角度 来 说 ,网 页 头 部 是 整个 页 面 设计 的 关 
键 , 它 将 对 页 面 的 色彩 体系 和 结构 体系 起 到 引领 和 协调 的 作用 ,牵涉 下 面 的 更 多 设计 和 整个 
页 面 的 协调 性 。 

网 页 主体 内 容 。 作 用 是 显示 网 站 的 主要 信息 ,用 于 放置 本 网 站 的 信息 栏目 。 相 对 网 页 
头 部 和 脚 部 来 说 结构 复杂 度 很 高 ,是 文本 、 图 片 \ 动 画 等 网 页 元 素 的 主要 展示 区 域 。 因 此 设 
置 结构 清晰 、 栏 目 划分 明确 的 布局 设计 ,是 吸引 浏览 者 的 关键 。 

网 页 脚 部 。 与 网 页 头 部 相 呼应 。 主 要 放置 制作 者 、 公 司 信息 ,版 权 所 有 等 相关 信息 , 许 
多 制作 信息 都 放置 在 这 个 位 置 。 
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网 页 布局 粗 看 没有 头绪 ,实际 上 是 按 和 人 类 从 上 到 下 、 从 左 到 右 的 浏览 习惯 设计 的 ,布局 
也 要 遵照 这 个 习惯 进行 。 同 时 注意 页 面 栏目 的 完整 性 , 先 划 大 区 域 再 逐步 细 化 ,因此 网 页 布 
局 的 流程 分 为 两 大 环节 。 

区 域 划 分 ,就 是 采用 手绘 的 方式 将 页 面 的 各 个 功能 区 域 绘制 成 块 ,可 以 采用 在 纸 上 进 
行 ,也 可 以 利用 Photoshop、 写 字 板 等 软件 进行 ,以 计算 整个 页 面 的 区 域 数量 ,如 图 1-8 所 示 。 
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图 1-8 网 页 区 域 划分 示意 图 


网 页 合成 ,针对 区 域 划分 ,对 所 有 区 域 图 设计 名 称 。 根 据 区 域 的 功能 来 确定 利用 
HTML 标签 及 相应 用 的 CSS 样式 结构 ,实现 最 终 效果 ,如 图 1-9 所 示 。 


图 1-9 网 页 最 终 效果 示意 图 
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网 页 布局 技术 是 利用 HTML 实现 页 面 结构 的 建立 ,利用 CSS 样式 对 结构 进行 优化 、 美 
化 来 完成 的 。 对 于 HTML 来 说 结构 的 搭建 主要 有 三 种 ,分 别 为 表格 .DIV 和 框架 ,下 面 就 
来 说 两 者 的 特点 。 


1 关于 表格 布局 

表格 布局 是 传统 的 页 面 布局 技术 ,优势 在 于 它 既 能 对 不 同 对 象 加 以 处 理 , 又 不 用 担心 不 
同 对 象 之 间 的 影响 ,而 且 表 格 在 定位 图 片 和 文本 上 比 起 用 CSS 更 加 方便 。 表 格 布 局 的 缺点 
是 , 当 用 了 过 多 表格 时 ,页 面 下 载 速 度 受到 影响 。 并 且 ,页 面 修改 的 工作 量 过 大 ,可 利用 性 差 。 


2 关于 DIV 布局 

目前 主流 的 网 页 设计 架构 大 多 为 DIV 十 CSS 结构 , 它 区 别 于 传统 的 表格 定位 的 形式 ， 
采用 以 “ 块 "为 结构 的 定位 形式 ,用 最 简洁 的 代码 实现 精准 的 定位 ,也 方便 维护 人 员 的 修改 和 
维护 ,更 大 化 地 优化 了 搜索 引擎 的 搜索 ,也 方便 了 SEO 人 员 的 优化 工作 。 

3 关于 框架 

从 布局 角度 来 说 ,框架 结构 也 是 一 种 好 的 布局 方式 ,可 以 实现 把 不 同 对 象 放 置 到 不 同 的 
页 面 加 以 处 理 , 但 由 于 框架 间 相 互 限制 ,缺少 灵活 性 ,多 用 于 后 台 页 面 布局 。 


1.5 DIV 十 CSS 页 面 布 局 基础 


151 单 栏 式 布局 设计 


DIV 十 CSS 布局 方式 充分 体现 了 结构 与 表现 分 离 设 计 思 想 。 其 中 DIV 是 利用 HTML 
标记 来 组 织 页 面 的 结构 ,CSS 是 针对 结构 层次 对 各 个 标记 进行 美化 。 在 本 节 中 将 专注 于 结 
构 与 表现 的 如 何 分 工 , 又 如 何 融 为 一 体 的 实现 过 程 。 


【知识 基础 】 


关于 DIV 单 栏 布局 : DIV 单 栏 布局 从 表现 来 看 就 是 一 个 独立 的 DIV 区 域 ,适用 于 网 页 
栏目 区 域 .内 容 区 域 . 各 个 功能 块 区 域 的 界定 ,是 DIV 十 CSS 布局 的 基础 。 

从 适应 浏览 器 的 角度 来 说 关于 单 栏 布局 可 以 分 成 固定 宽度 和 自 适应 宽度 两 种 模式 ,所 
谓 固定 宽度 是 指 其 宽度 的 属性 值 是 固定 像素 ;反之 自 适应 是 指 宽度 随 浏 览 器 的 变化 而 发 生 
变化 。 下 面 通过 具体 的 例子 来 具体 讲述 这 种 模式 。 


【任务 实施 】 


案例 1 创建 固定 宽度 的 单 栏 布局 。 

任务 1 在 HTML 文档 中 添加 DIV 结构 。 

步骤 1 鼠标 定位 在 HTML 文档 的 body 二 /body 二 标记 之 间 。 
步骤 2 添加 div 标记 内 容 如 下 : 


<div id "divi">1 列 固定 宽度 ,要 设置 像素 值 。< /div> 


TE sy 


步骤 3 在 设计 窗口 中 显示 内 容 如 下 : 
1 列 固定 宽度 ,要 设置 像素 值 。 


任务 2 为 DIV 结构 创建 CSS 样式 。 
步骤 1 确定 添加 CSS 的 位 置 。 
步骤 2 在 HTML 文档 的 二 head 二 标记 对 之 间 相应 的 位 置 输入 定义 的 CSS 样式 代码 ， 


固定 布局 的 使 用 方法 ,具体 操作 方法 如 下 : 


#divi{ 
background- color: #00000C; 
border: 3px solid # ff3399; 
width:300pz; 
height:200px; 

} 


任务 3 在 浏览 器 中 测试 效果 ,如 图 1-10 所 示 。 


无 标题 文档 - Windows Internet Expl.。 
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图 1-10 固定 宽度 浏览 器 示意 图 


案例 2 设置 1 列 自 适应 宽度 。 

任务 1 在 HTML 文档 中 的 DIV 块 的 规划 情况 如 下 : 

步骤 1 鼠标 定位 在 HTML 文档 的 body 之 和 /body> 标 记 之 间 。 
步骤 2 添加 div 标记 内 容 如 下 : 


<div id "divl">1 列 自 适应 宽度 ,要 设置 百分比 。< /div> 

步骤 3 在 设计 窗口 中 显示 内 容 如 下 : 

1 列 自 适应 宽度 ,要 设置 百分比 。 

任务 2 当 宽 度 实现 自 适应 后 ,DIV 块 规划 方法 不 发 生变 化 ,只 要 修改 CSS 样式 代码 就 


可 以 , 自 适应 布局 的 使 用 方法 ,具体 操作 方法 如 下 : 


#divi{ 
background- color: # COOOOC; 
border:3px solid # ff3399; 
width:60%; 
height:70%; 

} 


任务 3 在 浏览 器 中 测试 效果 ,如 图 1-11 所 示 。 
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图 1-11 自 适应 宽度 浏览 器 示意 图 


152 二 栏 式 布局 设计 
【知识 基础 】 


二 栏 式 布局 设计 从 表现 来 看 ,就 是 将 一 个 DIV 区 域 分 割 成 左右 两 个 栏目 ,是 DIV 十 
CSS 布局 细 化 的 基础 ,适用 于 网 页 各 栏目 区 域 的 界定 。 从 适应 浏览 器 的 角度 而 言 ,二 栏 式 
布局 可 以 分 为 固定 宽度 和 自 适 应 宽度 两 种 模式 。 固 定 宽度 就 是 设计 二 栏 区 域 块 的 宽度 固定 
像素 值 ,而 自 适应 宽度 模式 中 的 DIV 块 没有 固定 宽度 值 ,需要 设置 百分比 ,可 随 浏览 器 窗口 
的 大 小 变化 而 变化 。 在 二 栏 自 适应 宽度 模式 中 ,可 以 设置 右 侧 或 左 侧 的 自 适应 宽度 ,也 可 以 
同时 设置 两 侧 自 适应 宽度 。 下 面 通过 具体 的 例子 来 具体 讲述 这 种 模式 。 


【任务 实施 】 


案例 1 创建 固定 宽度 的 二 栏 式 布局 。 

任务 1 在 HTML 文档 中 添加 DIV 结构 。 

步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标记 之 间 。 
步骤 2 添加 div 标记 内 容 如 下 : 


<div id "con"™> 
<div id "left"> 二 栏 固定 宽度 ,左边 的 列 。< /div> 
<div id "right"> 二 栏 固定 宽度 , 右 侧 的 列 。< /div> 
</div> 


步骤 3 在 设计 窗口 中 ,可 发 现 left 和 right 两 个 栏 的 区 域 块 呈 上 下 排列 。 


任务 2 为 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 二 head> 标 记 对 之 间 的 相应 位 置 输入 定义 的 CSS 样式 代码 ， 
因为 DIV 为 块 级 元 素 ,为 了 实现 两 个 DIV 块 在 一 行 的 效果 ,本 例 采 用 了 float 属性 的 浮动 效 
果 固定 布局 ,具体 操作 方法 如 下 所 示 。 


#con{ 
background- color: #000000; 
border: 3px solid # ff3399; 
wiqdth:220px; 
height:150pxy 


width:50px; // 设 置 宽度 百分比 值 


float:left; // 向 左 进行 浮动 有 5 教学 内 容 \1' 时 圈 |+|| 对 
} 编辑 (E) 查看 WV) 收 苹 溢 &) 二 交 
#right{ 寅 收藏 天 人 Evindons EVindors Nedia 
background_ color: # fff; 国 目 
border:3px solid # 67£444; 
width:150px; // 设 置 宽度 百分比 值 
height:100px; 
float:left; // 向 左 进行 浮动 
任务 3 在 浏览 器 中 测试 效果 ,如 图 1-12 所 示 。 
案例 2 设置 二 栏 自 适应 宽度 。 图 1-12 二 栏 固定 宽度 浏览 器 示意 图 
任务 1 在 HTML 文档 中 规划 DIV 块 。 
步骤 1 鼠标 定位 在 HTML 文档 的 天 body 二 一 /body> 标 记 之 间 。 
步骤 2 添加 div 标记 内 容 如 下 : 
<div id "con"> 
<div id= "left"> 二 栏 自 适应 宽度 ,左边 的 列 。< /div> 
<div id "right"> 二 栏 自 适应 宽度 , 右 侧 的 列 。< /div> 
</div> 
步骤 3 在 设计 窗口 中 ,left 和 right 呈 纵 向 排列 。 
任务 2 当 宽 度 实现 自 适应 后 ,DIV 块 规划 方法 不 发 生变 化 ,只 要 修改 CSS 样式 代码 就 
可 以 。 


#oon{ 


background- color: #00000C; 
border:3px solid # ff3399; 


width:220pe; 
height::150px; 

} 

#1eft{ 
background_ color:# fff; 
border:3px soliq # ff3399; 


width:20%; // 设 置 宽度 百分比 值 

height:100px; 

float:left; // 向 左 进行 浮动 二 栏 自 适应 [=] 
} OO Er wnsu 2 [S|lx 
#right{ 文件 时) 编辑 里 ) 查看 WW) 收藏 光 ) 二 交 

background- color: # fff; 帘 收 训 天 | 斋 天 Yindows 四 ] Windows Nledis 

border: 3px solid # 67f444; BE[-[*| 名 [| | 向 

width:70%; // 设 置 宽度 百分比 值 百 ] 三 栏 下 送 应 膏 度 ， 填 例 的 

height:100px; 沁 克 列 。 

float:left; // 向 左 进 行 浮动 


} 

任务 3 在 浏览 器 中 测试 效果 ,如 图 1-13 所 示 。 
153 三 栏 式 布局 设计 
【知识 基础 】 


DIV 十 CSS 布局 方式 充分 体现 了 结构 与 表现 分 离 的 设计 思想 ,其 中 DIV 是 利用 HTML 
标记 来 组 织 页 面 的 结构 ,CSS 是 针对 结构 层次 对 各 个 标记 进行 美化 。 从 页 面 表现 上 来 说 ， 
网 页 中 繁杂 的 DIV 区 域 结构 图 ,实际 上 都 是 由 单 栏 、 两 栏 , 三 栏 组 合 而 成 的 ,在 单 栏 .二 栏 式 
布局 学 习 的 基础 上 ,掌握 三 栏 式 布 局 设计 。 对 于 页 面 的 组 织 与 架构 也 起 着 至 关 重 要 的 作用 。 
下 面 通过 具体 的 例子 来 具体 讲述 这 种 模式 。 


【任务 实施 】 


案例 1 创建 三 栏 固 定 宽度 的 单 栏 布局 。 

任务 1 在 HTML 文档 中 添加 DIV 结构 。 

步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标记 之 间 。 
步骤 2 添加 div 标记 内 容 如 下 : 


图 1-13 二 栏 自 适应 宽度 浏览 器 示意 图 


<div id "con"> 
<div id "eft"> 三 栏 固定 宽度 ,左边 的 列 。< /div> 
<div id "migdle"> 中间 列 宽 固 定 。< /div> 
<div id "right"> 三 栏 固定 宽度 , 右 侧 的 列 。< /div> 
</div> 
步骤 3 在 设计 窗口 中 显示 left、middle\right 三 个 区 域 块 成 纵向 排列 。 
任务 2 为 DIV 结构 创建 CSS 样式 。 
步骤 1 确定 添加 CSS 的 位 置 。 
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步骤 2 在 HTML 文档 的 一 head 标记 对 之 间 相应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
固定 布局 的 使 用 方法 ,具体 操作 方法 如 下 : 


#con{ 
background- color:# O0C; 
width:300px; 
height:200p; 
border:3px solid # ff3399; 

} 

#1eft{ 
background- color: #f£ff; 
border:3px solid # 000; 
width:80px; 
height:150px; 
float:left; 

} 

#middle{ 
background- color: # 000000; 
border:3px solid # ffffff; 
width:80px; 
height:150px; 
olor: #FFFFFF; 
float:left; 

} 

#right{ 
background- color: # fff; 
border:3px solid # 000; 
Color: # FEFFFF; 
width:120px; 
height:150px; 
float:left; 

} 


任务 3 在 浏览 器 中 测试 效果 ,如 图 1-14 所 示 。 

案例 2 关于 三 栏 自 适应 宽度 。 

任务 1 在 HTML 文档 中 规划 DIV 块 。 

步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标记 之 间 。 

步 又 2 本 例 主要 是 针对 中 间 栏 进行 宽度 自 适应 设置 ,要 认真 体会 在 浏览 窗口 大 小 变 
化 时 ,以 下 三 个 区 域 块 的 变化 规律 ,添加 div 标记 内 容 如 下 : 

<div id- "eft"> 三 栏 自 适应 宽度 ,左边 的 列 。< /div> 

<div id "migdle"> 三 栏 自 适应 ,中 间 列 宽 。< /div> 

<div id "right"> 三 栏 自 适应 宽度 , 右 侧 的 列 。< /div> 
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图 1-14 三 栏 固 定 宽度 浏览 器 示意 图 


步骤 3 在 设计 窗口 中 显示 leftvmiddle ,right 三 个 区 域 块 成 纵向 排列 。 

任务 2 ” 当 宽 度 实现 自 适应 后 ,DIV 块 规划 方法 不 发 生变 化 ,只 要 修改 CSS 样式 代码 就 
可 以 。 由 于 三 栏 中 有 三 个 DIV 区 域 块 , 自 适应 宽度 可 针对 一 个 或 多 个 块 进行 ,具体 操作 方 
法 如 下 所 示 。 


#1eft{ 
background- color: # fff; 
border:3px solid # 000; 
width:20%; 
height:150px; 
float:left; 

} 

#micdle{ 
background- color: # 000000; 
border:3px solid # ffffff; 
height:150px; 
Color: # FEFFFFF; 
float:left; 

} 

# right{ 
background- color: #£ff; 
border:3px solid # 000; 
Color: # FFEFFFF; 
width:20%; 
height:150px; 
float:left; 

} 


任务 3 在 浏览 器 中 测试 效果 ,如 图 1-15 所 示 。 


' 6 前 王 设 计 与 制作 一 HIM+CSStjQey 


i 
3 | 
Kk 
| 四 | 
| 
号 | 
六 
| 
_ 
| 区 
| | Xx 
,| 回 
lx 


实 收 总 来 | 言 目 Yindors 已 ] Yindovws Nedia 忆 ] 免费 Hotnail 


如 |-|«| 息 3 栏 x|» 从 "上 国 - 局 台 - 


图 1-15 三 栏 自 适应 宽度 浏览 器 示意 图 


1.6 任务 拓展 


任务 ”制作 框架 结构 图 。 

任务 描述 : 图 1-16 是 骨髓 型 网 页 的 基本 框架 结构 。 主 要 分 为 外 框 、 网 头 、 网 页 内 容 、 网 
底 四 个 结构 ,其 中 网 头 部 分 又 分 为 左 、 右 两 个 区 域 ,网 页 内 容 分 为 左 、 中 、 右 三 个 区 域 。 

任务 要 求 : 利用 DIV 十 CSS 制作 如 图 1-16 所 示 结 构 。 


图 1-16 ”骨骼 型 框架 结构 


1.7 本 章 小 结 


本 章 主要 介绍 了 网 页 的 基本 概念 .工作 原理 ,网 页 的 元 素 特征 等 基础 知识 。 在 此 基础 上 
重点 介绍 了 网 页 的 布局 基础 和 流程 \ 相 关 技 术 及 DIV 十 CSS 进行 页 面 布局 的 基本 思想 和 技 
巧 。 通 过 本 章 的 学 习 , 可 以 掌握 网 页 布局 的 DIV 十 CSS 技术 基础 ,为 后 面 制作 各 种 网 页 效 
果 做 好 准备 。 


习 题 

一 、 填空 题 
(1) CSS 样式 优先 级 序列 从 高 到 低 是 行内 样式 、 内 部 样式 、 \、 默 认 样 式 。 
(2) 网 页 布局 的 两 个 主要 标签 是 和 。 
(3) 外 部 样式 单 文件 的 扩展 名 是 
(4) 实现 块 级 元 素 浮动 的 属性 是 
(5) 块 级 元 素 可 利用 属性 实现 水 平 居中 。 
(6) 文本 /图 片 可 利用 属性 实现 在 当前 块 内 水 平 居中 。 
(7) 块 级 元 素 可 利用 属性 实现 竖 直 居中 。 
二 、 选择 题 
(1) CSS 中 ID 选择 符 在 定义 的 前 面 要 有 指示 符 ( ) 。 

A. * B. & D. # 
(2) 下 列 选项 中 属于 CSS 行 高 属性 的 是 ( % 

A. font-size B. text-transform C. text-align D. line-height 
(3) 不 属于 BOX 模型 属性 的 是 ( ”)。 

A. margin B. padding C. color D. border 
(4) CSS 是 利用 什么 XHTML 标记 构建 网 页 布局 ? (  ) 

A. <dir> B. <div> C. <dis> D. <def> 
(5) CSS 中 class 选择 符 在 定义 的 前 面 要 有 指示 符 ( $s 

A. ， B. & C1 D. # 
三 、 操 作 题 
已 有 区 域 块 : 


<div id "divi"> < /div> 
<div id "div2> < /div> 

<div id "div3> < /div> 

其 中 ,divl 宽度 为 100px,div2 宽度 为 300px,div3 宽度 为 200px, 高 度 均 为 300px。 
操作 要 求 如 下 : 

(1) 将 divl div2 ,div3 区 域 块 按 从 左 到 右 顺序 进行 排列 。 

(2) 将 divl、div3、div2 区 域 块 按 从 左 到 右 顺 序 进行 排列 。 

(3) 将 div3、div2、divl 区 域 块 按 从 左 到 右 顺 序 进行 排列 。 


网 页 图 文 排版 Se 


文字 和 图 像 都 是 网 页 中 十 分 重要 的 组 成 部 分 ,担负 着 传递 信息 的 重要 任务 。 文 字 所 占 
有 的 存储 空间 非常 小 ,在 一 些 大 型 网 站 中 ,文字 的 主导 地 位 是 无 可 替代 的 。 几 乎 所 有 的 网 站 
都 使 用 图 像 来 增加 吸引 力 , 有 了 图 像 , 网 站 才能 够 吸引 更 多 的 网 友 驻 足 , 才 能 够 更 好 地 表现 
主题 。 但 是 ,图 像 的 增加 也 会 使 网 页 的 下 载 时 间 大 大 增加 ,所 以 设计 网 页 时 要 整体 考虑 图 像 
的 数目 和 大 小 ,要 适量 。 


本 章 要 点 


2.1 设计 图 文 版 面 
2L1 制作 网 页 文字 版 面 


【知识 基础 】 


文本 是 网 页 中 的 重要 元 素 之 一 。 大 多 数 的 网 页 都 要 通过 文本 来 表现 网 页 内 容 , 合 理 
的 文本 编辑 要 以 增加 网 页 的 多 辑 性 和 视觉 性 ,给 人 一 目 了 然 的 感觉 为 目的 。 在 本 节 中 将 
结合 实例 讲解 文本 在 网 页 中 的 具体 应 用 方法 ,包括 文本 的 添加 、 文 本 样式 的 设置 、 排 
版 等 。 


1 头 部 标签 

< 二 head> 标 签 : 出 现在 HTML 文档 的 开始 部 分 ,位 于 过 head 盖 与 到 /head 二 之 间 的 内 
容 ,不 会 在 浏览 器 窗口 中 显示 。 

二 title 二 标签 : 用 于 定义 HTML 网 页 的 标题 ,位 于 所 title> 与 二 /title 之 之 间 的 内 容 ， 
将 显示 在 浏览 器 的 窗口 中 。 

去 meta> 标 签 : 位 于 文档 的 头 部 ,不 包含 任何 内 容 。 所 meta 之 标签 的 属性 定义 了 与 文 
档 相 关联 的 名 称 / 值 对 。 用 于 借助 HTML 网 页 的 字符 编码 、 关 键 字 、 描 述 、 作 者 、 自 动 刷新 
等 信息 ,包括 以 下 几 种 属性 。 

name 属性 : 提供 了 名 称 / 值 对 中 的 名 称 。 如 “keywords” 是 一 个 经 常 被 用 到 的 名 称 , 它 
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为 文档 定义 了 一 组 关键 字 。 某 些 搜索 引擎 在 遇 到 这 些 关 键 字 时 ,会 用 这 些 关键 字 对 文档 进 
行 分 类 。 

http-equiv 属性 : 为 名 称 / 值 对 提供 了 名 称 。 并 指示 服务 器 在 发 送 实际 的 文档 之 前 先 要 
传送 给 浏览 器 的 MIME 文档 头 部 包含 名 称 / 值 对 。 

content 属性 : 提供 了 名 称 / 值 对 中 的 值 。 该 值 可 以 是 任何 有 效 的 字符 串 。content 属 
性 始终 要 和 name 属性 或 http-equiv 属性 一 起 使 用 。 

charset: 设置 字符 与 汉字 的 编码 。 

例如 : 


<html> 
<head> 
<title>meta 标 签 的 应 用 < /title> 
<meta http- eqaiv= "oontent- type" content= "text/htmlicharset= ge0312"> 
<meta name= "description" content= "这 是 一 个 有 关 搜 索引 擎 的 主页 "/> 
<meta name= "keywords" content= "电影 ,电视 剧 ,VcD,IVD"> 
<meta name= "author" oontent=' 李 上 明 "/> 
<meta http- equiv= "refresh" oontent= "5;URI= http://www.126.0cm"> 
< /head> 
<body> 
< /body> 
</htm> 
其 中 ,二 meta http-equiv 王 "content-type"”content 一 "text/html;icharset 一 gb2312" 二 用 
于 设置 网 页 字符 的 编码 方式 ;二 meta name 二 "description" content 二 "这 是 一 个 有 关 搜 索引 
擎 的 主页 "/ 二 用 于 指定 对 网 页 的 描述 ;一 meta name 二 "keywords”content 二 "电影 ,电视 
剧 ,VCD, DVD"/ 二 用 于 标记 搜索 引擎 在 搜索 网 页 时 所 获取 的 关键 词 ; 二 meta name 一 
"author" content 二 " 李 明 "/ 二 用 于 表示 网 页 的 设计 者 ; 二 meta http-equiv 二 "refresh" 
content 二 "5; URL = http://www. 126. com" 二 用 于 定义 网 页 打开 5 秒 后 自动 跳 转 到 


http://www. 126. com。 

2 主体 标签 

过 body 二 标签 用 于 标记 HTML 网 页 的 主体 部 分 ,在 过 body 之 与 二 /body 二 标签 之 间 ， 
一 般 包含 其 他 标签 ,这些 标签 和 标签 属性 构成 了 HMTL 网 页 的 主体 部 分 。 

(1) 设置 背景 颜色 : bgcolor。 例 如 : 

<body bgcolor= 啡 ff0000"> 

用 于 设置 背景 颜色 为 红色 。 

(2) 插入 背景 图 片 : background。 例 如 : 

<body background= "1 .jpg" > 

用 于 将 图 片 1. jpg 设置 为 背景 。 例 如 : 


<body background- "1.jpg" bgproperties= "fixed"> 


FE 
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用 于 使 背景 图 片 不 随 滚动 条 滚动 。 

(3) 设置 文字 颜色 与 链接 颜色 : text 属性 表示 HTML 网 页 的 文本 颜色 ,使 用 text 定义 
的 颜色 将 应 用 于 整 篇 文档 。 例 如 : 

<body text= 啡 ff0000"> 

用 于 设置 文本 颜色 为 红色 。 

使 用 link、vlink、alink 属性 可 以 分 别 控制 普通 的 超级 链接 ,访问 过 的 超级 链接 和 当前 活 
动 的 超级 链接 文本 的 颜色 。 例 如 : 

<body link= 啡 coddeen vlinke 啡 三 3366" alinle 啡 6599ccr> 

(4) 设置 页 边 距 : topmargin 和 leftmargin 属性 用 于 设置 网 页 主体 内 容 与 网 页 顶端 . 左 
端的 距离 。 例 如 : 

<body leftmargin= "0" topmargin= "0"> 

用 于 设置 网 页 主体 内 容 与 左 端 和 顶端 的 距离 为 0 像素。 

3 标题 标签 

标题 标签 hn> ,其 中 mn 取 1 一 6 的 整数 ,表示 标题 级 别 。 当 nm 取 1 时 为 标题 1, 字 号 最 
大 ;最 小 的 标题 级 别 是 6, 此 时 字号 最 小 。 例 如 : 


网 页 制作 


心 网 页 制作 .> 
< 心 网 页 制作 -mr 
<nw 网 页 制作 < pa 


<h5> 网 页 制作 < ms> 
<h6> 网 页 制作 < /h6> 


4 段落 标签 

段落 是 通过 二 p 二 标签 定义 的 。 

属性 : align 表示 对 齐 段 落 , 可 取 值 为 left、center、right. 默 认 值 为 left。 例 如 : 
<p alig= "left"> 向 左 对 齐 ”</p> 

<p align= "oanter"> 居 中 对 齐 < /p> 

<P align= "right"> 向 右 对 齐 < /p> 


5 换行 标签 

换行 标签 二 br 二 用 于 强行 换行 ,在 HTML 代码 里 直接 换行 的 话 , 按 浏览 器 的 不 同 可 能 
显示 为 一 个 空格 ,或 者 被 忽视 。 在 浏览 器 里 正确 地 换行 要 使 用 二 br 二 换行 标签 。 

6 水 平 线 标签 

去 hr 标签 用 来 设置 一 条 水 平 线 分 割 线 ,水 平分 割 线 的 特点 是 100% 宽 度 ,并 且 独 占 一 
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行 ,上 且 与 上 下 内 容 有 一 定 距 离 。 
属性 : size 用 于 设 定 线 宽 ;color 用 于 设 定 线 的 颜色 ;width 用 于 设 定 线 长 ;align 用 于 设 
定 对 齐 方式 。 例 如 : 


<hr size= "4" color= "# 0286ff" width= "800" align= "center"> 


7 字体 标签 

字体 标签 过 font 之 用 于 设置 文本 的 属性 。 在 最 新 的 HTML 版 本 (HTML 4 和 
XHTML) 中 ,字体 标签 已 被 废弃 。 万 维 网 联盟 已 从 其 标准 中 删除 了 字体 标签 。 在 未 来 , 样 
式 表 (CSS) 将 用 来 定义 布局 ,以 及 显示 HTML 元 素 的 属性 。 


& 无 序列 表 
列表 就 是 在 网 页 中 将 相关 资料 以 条 目的 形式 有 序 或 无 序 排列 而 形成 的 表 , 类 似 于 文字 
处 理 软 件 中 的 “项 目 符号 和 编号 ”。 列 表 主 要 分 为 无 序列 表 、 有 序列 表 和 贬 套 列表 。 
无 序列 表 标 签 是 二 ul 二 二/ul 二 ,无 序列 表 是 指 没有 进行 编号 的 列表 ,每 一 个 列表 项 前 
使 用 二 li 二 标签 。 
< 一 li 二 标签 包含 type 属性 ,type 属性 值 可 为 disc( 圆 点 ) circle( 圆 圈 ) ,square( 方 块 ) ,其 
默认 符号 是 圆 点 。 例 如 : 
<ul> 
<1i> 在 那 遥 远海 边 慢 慢 消失 的 你 < /1i> 
<1i> 本 来 模糊 的 脸 竟然 渐渐 清晰 < /1i> 
<1i type= "disc"> 想 要 说 些 什 么 又 不 知 从 何 说 起 < /1i> 
<li type= "disc"> 只 有 把 它 放 在 心底 < /li> 
<1li type= "circle"> 茫 然 走 在 海边 看 那 潮 来 潮 去 < /1i> 
<1i type= "circle"> 徒 劳 无 功 想 把 每 朱 浪 花 记 起 < /1i> 
<1i type= "square"> 想 要 说 声 爱 你 却 被 吹 散在 风 里 < /1i> 
<]i type= "square"> 猛 然 回 头 你 在 哪里 < /1i> 
</aul> 
显示 效果 如 图 2-1 所 示 。 


9 有 序列 表 Sc: oemonts and settine... E[@| 鸭 

有 序列 表 就 是 列表 项 的 前 导 符号 是 有 序 的 符号 | 名 晤 ”ewwwe 是 国 [|x| | 
标识 的 列表 。 有 序 的 符号 标识 包括 : 阿拉 伯 数 字 、 小 a 
写 英文 字母 .大 写 英文 字母 .小 写 罗马 数字 、 大 写 罗马 


i 。 在 那 迁 远海 边 慢 慢 消失 的 你 
有 序列 表 由 二 ol 二 和 二 li 二 标签 来 标记 。 其 中 ， 人 

二 ol 二 标签 标识 一 个 有 序列 表 的 开始 ,二 li 二 标签 标 < 有 区 从 二 

识 一 个 有 序列 表 项 。 。 徒劳 无 功 想 把 每 水 浪花 记 起 


。 想 要 说 声 爱 你 却 被 吹 散在 风 里 
二 ol 二 标签 包含 type 属性 ,type 属性 的 值 有 1、 " 狸 然 回头 你 在 哪里 
Ava、 工 和 本 ;start 属性 可 以 定义 列表 的 起 始 编号 ,如 
i 二 
果 希 望 列表 的 第 一 个 编号 为 3, 而 不 是 1, 则 需要 定义 ”2 


一 ol 二 元 素 的 start 属性 。 例 如 : 2-1 无 序列 表 效果 
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<ol> 
<1i> 如 果 大 海 能 够 唤 回 曾经 的 爱 < /1i> 
<1i> 就 让 我 用 一 生 等 待 < /li> 
</ol> 
<ol > 
<1li type= "ma> 如 果 深 情 往事 你 已 不 再 留恋 < /1i> 
<1li type= "A'> 就 让 它 随 风 标 远 < /1i> 
</ol> 
<ol> 
<1lityper"a> 徒 劳 无 功 想 把 每 洒 浪 花 记 起 < /1i> 
<1li type= "av> 想 要 说 声 爱 你 却 被 吹 散在 风 里 < /1i> 
</ol> 
<ol> 
<1li type= "> 如 果 大 海 能 够 带 走 我 的 哀愁 < /1i> 
<1li type= "1"> 就 像 带 走 每 条 河流 < /1i> 
</ol> 
<ol> 
<1litype="T> 所 有 受过 的 伤 < /1i> 
<1li type= "I" 所 有 流 过 的 泪 < /1i> 
</ol> 
<ol> 
<1li type= "i> 我 的 爱 < /1> 
<1li type= "i"> 请 全 部 带 走 < /li> 
</ol> 
<ol start="3">S 
<1lityper "ma> 所 有 受过 的 伤 < /1i> 
<1li type= "aA"> 所 有 流 过 的 泪 < /1i> 
<ol start= "8"> 
<1i> 我 的 爱 < /1i> 
<1i type= "i> 请 全 部 带 走 < /li> 
</ol> 
</ol> 


显示 效果 如 图 2-2 所 示 。 

10 注释 标签 

注释 标签 用 于 在 源 代码 中 插入 注释 ,注释 不 会 显示 在 浏览 器 中 。 

可 以 使 用 注释 对 代码 进行 解释 ,这 样 做 有 助 于 在 以 后 的 时 间 对 代码 进行 编辑 。 尤 其 当 
编写 了 大 量 代 码 的 时 候 非常 有 用 。 

注释 语法 : 

< 上 -注释 的 内 容 --> 


// 注 释 内 容 在 css 或 uavascript 中 插 人 单行 注释 ) 
/* 注释 内 容 * /在 Css 或 Javascript 中 插入 多 行 注释 ) 


例如 : 


3 
VDocments : 蕊 国 


文件 如 ”编辑 包 ”查看 久 收藏 屎 和 ) 工具 CT) 帮助 
突 收 天 | 息 C: Docments and Settines\hdninistrator\..， | 


如果 大 海 能 够 唤 回 曾经 的 爱 
。 就 让 我 用 一 生 等 符 


.如 果 深 情 往事 你 已 不 再 留恋 
.就 让 它 随 风味 远 


。 徒劳 无 功 想 把 每 休 浪 花 记 起 
。 想 要 说 声 爱 你 却 被 吹 散 在 风 里 


如果 大 海 能 够 带 走 我 的 哀愁 
。 就 像 带 走 每 条 河流 


。 所 有 受过 的 伤 
.所 有 流 过 的 泪 


i. 我 的 爱 
i， 请 全 部 带 走 


、 所 有 受过 的 伤 
D， 所 有 流 过 的 泪 
8， 我 的 爱 


ix 请 全 部 带 走 


图 2-2 ”有 序列 表 效果 


<body> 
<!-- 这 是 注释 --> 

注释 在 浏览 器 中 将 被 隐藏 
< /body> 


让 文字 格式 化 
见 的 文字 格式 化 标签 如 表 2-1 所 示 。 


表 2-1 文字 格式 化 标签 列表 


标 签 说 明 标 签 说 明 
<b> 加 粗 文字 <u> 下 划 线 

二 这 斜体 文字 <ins> 插入 文字 
<big> 加 大 文字 <del> 被 删除 的 文本 
=small> 缩小 文字 <strike> 定义 删除 线 的 文字 
<sup> 上 标 文 字 <strong> 加 强 文字 

< 到 sub> 下 标 文字 <em> 强调 文字 


ECcsjaey 
例如 : 


<body> 
<b> 加 粗 < /b><br/> 
< 这 斜体 < /i><br/> 
<big> 加 大 < /big><br/> 
<small> 缩 小 < /amall><br/> 
sup< sdb> 上 标 文字 < /sub> <br/> 
sub< sup> 下 标 文 字 < /sup> 
< 必 下 划 线 <A><br/> 
< strike> 删 除 线 < /strike> <br/> 
< strong> 加 强 文字 < /strong> <br/> 
<em> 强 调 文字 < /en> 

</body> 


在 浏览 器 中 显示 的 效果 ,如 图 2-3 所 示 。 
下 面 通过 具体 的 例子 来 具体 讲述 以 上 标签 的 
应 用 。 


【任务 实施 】 
案例 ”进行 如 图 2-4 所 示 样 式 的 网 页 文本 排版 。 


IEDITTEEEZTIOEZ 


EAD .A 


\WwYiwenzipalban,html 


图 2-4 文本 设计 样 文 


任务 1 添加 网 页 文件 的 标题 。 
步骤 在 <title> 和 过 /title 二 标签 之 间 添 加 “中 国 移动 : 用 5 年 时 间 从 3G 转变 为 TD- 
LTE"。 
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<title> 中 国 移动 :用 5 年 时 间 从 36 转 变 为 TD- ITE< /title> SS 
任务 2 设置 网 页 正文 的 标题 。 
步骤 1 在 “中 国 移动 : 用 5 年 时 间 从 3G 转变 为 TD-LTE” 前 后 分 别 添加 过 h3 之 和 

二 /h3 二 标签 。 
步骤 2 自 定义 “.h3” 的 CSS 样式 如 下 : 


d3{ 

font— size: 20px; 
font— weight: bold; 
color: #003366; 
text— align: oenter;} 


步骤 3 在 “http://www. sina. com. cn 2011 年 09 月 07 日 00:48 新 浪 科 技 ” 前 后 分 别 


添加 二 h4 二 和 二 /h4 二 。 
步骤 4 自 定义 “. h4” 的 CSS 样式 如 下 : 
ha4f 


font- size: 13x; 

text- align: oanter; 

font- weight: nommal;} 

步骤 5 在 “新 浪 科技 "前 后 分 别 演 加 一 font> 和 一 /font> 标 签 ， 

<font color= 啡 990000"> 新 浪 科技 < /font> 

任务 3 设置 新 闻 内 容 段落 : 

步骤 1 在 “ 微 博 新 浪 科技 讯 …… 将 完全 过 渡 到 4G.” 前 后 分 别 添加 二 p 二 和 二/p 二 。 
步 又 2 在 "在 9 月 6 日 …… 会 过 渡 到 TD-LTE. ”前 后 分 别 添加 二 p 之 和 志 /p>。 
步骤 3 在 “他 又 表示 …… 下 半年 达到 商用 水 平 。" 前 后 分 别 添 加 二 p 之 和 志 /p>。 
步骤 4 重新 定义 “p” 的 CSS 样式 如 下 : 


Pp {text- indent: 2em;} 


任务 4 设置 页 面 边 距 、 行 高 、 页 面 文字 字号 及 背景 颜色 ,并 添加 水 平 线 。 
步骤 1 重新 定义 “body” 的 CSS 样式 如 下 : 


body { 

marginr left: 10px; 

margin- top: 10px; 

margin- right: 10px; 

margin— bottom: 10px; 

line— height: 20px; 

font- size: 13px; 
background color: # aocd6d9;} 


步骤 2 在 “二 相关 报道 ”前面 添 加 二 hr 二 标签 : 


<hr width= "90%" size= "1" noshaGe= "noshade" class= "hr"> 


疼 全 制作 一 HIML CSStjQey 


sq) 


步骤 3 重新 定义 “hr” 的 CSS 样式 如 下 : 


re 

color: #000000;} 

任务 5 设置 “相关 报道 ”及 其 下 的 文字 列表 。 

步骤 1 在 “二 相关 报道 "前面 添加 空格 。 

步骤 2 添加 列表 标签 ,内 容 如 下 : 

<uUl> 
<1i> 中 国 移动 明年 在 7 个 城市 开展 TD- IE 商业 预测 试 < /1i> 
<1i> 中 国 移动 招标 首 批 rp- IE 测试 仪器 仪表 < /1i> 


<1i> 中 国 台湾 地 区 ?D-IIE 试 验 网 启动 中 国 移动 提供 技术 支持 < /1i> 
< 
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【知识 基础 】 


图 像 在 网 页 中 具有 重要 的 作用 ,与 文本 一 样 ,都 是 网 页 中 不 可 缺少 的 基本 元 素 。 为 了 更 
好 地 表达 网 页 的 内 容 , 显 示 出 网 页 的 主题 ,在 制作 网 页 时 通常 使 用 图 片 ,使 得 网 页 变 得 更 加 

引用 图 像 使 用 二 img 二 标签 ,该 标签 包含 src 属性 , 即 所 引用 图 像 的 URL 地 址 , URL 地 
址 可 以 是 绝对 地 址 ,也 可 以 是 相对 地 址 。 

语法 格式 : 


< img src= "image- URL"> 

属性 如 下 。 

src: 属性 是 用 来 指出 一 个 图 像 的 URL 路 径 名 。 

alt: 图 像 的 取代 文字 。 

height/width: 设 定 图 像 的 高 度 和 宽度 ,以 像素 为 单位 。 
border: 设 定 图 像 的 边框 ,以 像素 为 单位 。 
vspace/hspace: 设 定 图 像 周围 的 空白 区 域 。 

align: 设 定 图 像 的 对 齐 方式 。 


1 在 页 面 中 插入 图 片 
如 果 图 片 文件 logo. png 在 本 地 计算 机 的 images 文件 夹 中 , 则 代码 如 下 : 


< img src= "images/logo.png"> 


2 替换 文本 说 明 

有 时 ,由 于 网 络 过 忙 或 用 户 在 图 片 还 没有 下 载 完全 就 单 击 造成 的 浏览 器 的 停止 ,导致 用 
户 不 能 在 浏览 器 中 看 到 图 片 时 , 蔡 换 文本 说 明 就 十 分 有 必要 了 。 蔡 换文 本 说 明 应 该 简洁 而 
清晰 ,能够 为 用 户 提供 足够 的 图 片 说 明 信 息 ,使 用 户 在 无 法 看 到 图 片 的 情况 下 也 可 以 了 解 图 
片 的 内 容 信息 ,如 图 2-5 所 示 ,代码 如 下 : 


第 2 章 网 页 而 交 汪 万 》 
了 加 
< img sro- "images/ changbaishan.jpg" alt= "长 白山 天 池 " /> eh 
3 设 定 图 像 的 宽度 和 高 度 
可 以 更 改 图 像 的 宽度 和 高 度 来 缩放 图 像 的 显示 大 小 ,但 这 不 会 缩短 下 载 时 间 ,因为 浏览 
器 在 缩放 图 像 前 会 下 载 所 有 图 像 数据 。 若 要 缩短 下 载 时 间 并 确保 所 有 图 像 实 例 以 相同 大 小 
显示 ,请 使 用 图 像 编辑 应 用 程序 缩放 图 像 。 
调整 了 图 片 大 小 的 代码 如 下 : 


< ing srcr "images/ changkaishan.jpg" al 二 呈 白 山 天 池 " width= "209" height= "240" /> 


太 长 白山 天 泡 - Windows Internet E.-- 攻 上 操 | 必 | 


GO 加 rvaiveving 国 国 由 | 区 PE 到 长 白山 天 池 - Windows Int... [| 右 | 区 |] 
文件 中 编辑 查看 WW 收藏 天 AQ) 工具 CI) 天 助 @ 昌 -四 rvivevin 四国 [后 [x] [| 

| 文件 @) 编辑 于) 查看 WW) 收藏 灾 &) 工具 ! ” 
窜 收 大 丈 | 禾 长 白山 天 池 


灾 收 高 天 | 芒 长 和 册 天 油 


图 2-5 添加 替换 文本 图 2-6 添加 图 片 边框 


4 添加 图 片 边框 
有 时 在 网 页 中 通过 给 图 片 添加 边框 ,会 使 页 面 显得 更 醒目 、 更 美观 ,如 图 2-6 所 示 , 代 码 
如 下 : 


< img src= "images/ changbaishan.jpg" alt= 拆 白山 天 池 " border="" /> 
5 图 示 周 围 添加 空白 区 域 


vspace 属性 能 够 在 图 片 的 上 下 两 侧 添加 空白 区 域 ,hspace 属性 能 够 在 图 像 的 左右 两 侧 
添加 空白 区 域 ,代码 如 下 : 


< img src= "images/ changbaishan.jpg" alt= "中 白山 天 池 " width= "209" height= "240" hspace= "50" vapace=" 
50" border= "1" /> 


显示 效果 如 图 2-7 所 示 。 
【任务 实施 】 
案例 ”进行 如 图 2-8 所 示 样 式 的 网 页 图 片 排 版 。 


toi 设计 与 制作 一 HM+ CS+jQey 


厂 长 白山 天 池 - Windows Internet Explorer 


GO Ervin 四 国 |[sz [|x| [P TF, ti 


文件 下) 编辑 于 ) 查看 WD 收 意 夹 由 工具 上 帮助) 
究 收 就 天 ”| 曲 ， 镍 长 白山 天 池 疙 长 白山 天 池 


图 2-7 添加 空白 区 域 


/2 图 片 排版 - Windows Internet Explorer 

GO | 四 Fpaivai\inex hal 里 圈 | 信 [Xx| | 户主 度 一 下 ,谷底 
文件 到 ) ”编辑 下 ) 查看 WW 收藏 夹 ) 工具 YI) 帮助 人 0 

窑 收 天 “| 七 图 片 措 版 


图 2-8 图 片 排版 样 文 


任务 1 在 HTML 文档 中 添加 DIV 结构 。 
步 又 1 鼠标 定位 在 HTML 文档 的 天 body 二 一 /body 二 标签 之 间 。 
步骤 2 添加 div 标签 内 容 如 下 : 


<div ic "con"> 
< img src= "images/tu6.jpg" width= "150" height= "150" /> 
< img src= "images/tu4.jpg" width= "150" height= "150" /> 
< img src= "images/tul1.jpg" width= "150" height= "150" /> 
</div> 


步骤 3 在 设计 窗口 中 显示 内 容 如 图 2-9 所 示 。 


FDW 国 ” 立 ” 品 ~ 


|700 x 295v 110 K / 16 秒 Uniceis 0TF-6) 


2-9 ”排版 前 的 图 片 


任务 2 为 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 二 head 二 标签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
具体 操作 方法 如 下 : 


#oon { 
width: 600px; 
margin top: 10px; 
margin- right: auto; 
margin- bottam: 10px; 
margin- left: auto; 
height: 170px; 
border: lpx solid # 999;} 
#ocn img { 
margin left: 30px; 
margin top: Spx;} 
任务 3 在 浏览 器 中 测试 效果 。 
213 制作 网 页 图 文 混 排版 面 


【知识 基础 】 

有 了 图 像 , 网 站 才能 够 更 好 地 表现 主题 。 图 像 与 文本 的 完美 结合 可 以 提升 网 页 的 美观 
性 ,吸引 更 多 人 的 关注 。 本 节 将 通过 案例 来 学 习 怎 样 进行 图 片 与 文本 的 混合 排版 ,使 网 页 页 
面 能 够 吸引 更 多 网 友 的 驻足 。 


{ mM so 
58 
【任务 实施 】 
案例 1 图 片 作为 网 页 的 背景 。 
任务 1 在 HTML 文档 中 添加 DIV 结构 。 
步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 /body 二 标签 之 间 。 
步骤 2 添加 div 标签 内 容 如 下 : 


<div id= "con"> 图 片 作 为 网 页 的 背景 ,可 以 实现 在 图 像 上 添加 文本 、 图 像 表格 等 网 页 元 素 。 


</div> 

步骤 3 添加 页 面 的 标题 ,标签 内 容 如 下 : 
<title> 图 片 作为 网 页 的 背景 < /title> 

步骤 4 在 设计 窗口 中 显示 内 容 如 图 2-10 所 示 。 


Dw mm: 0 &， 
文件 J 多 二 全 查看 (J ” 扬 入 ( 了 ) 外 以 吕 ”格式 (0 命 人 Ct] 站 直人 家 口 全 韦 助 (0 
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图 2-10 添加 CSS 样式 表 前 的 页 面 


任务 2 为 上 述 DIV 结构 创建 CSS 样式 。 

步 又 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 二 head 二 标签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
具体 操作 方法 如 下 : 


#ocn { 
height: 200px; 
width: 400px; 
margin top: SOpx; 
margin- bottam: Opx; 
margin- left: 90px; 
Color:# 900; 
font- weight:bold; 
font- size:30px; 
text— indent: 2em;} 
bedy { 
background- image: url (images/wybj.jpg); ””// 添 加 网 页 的 背景 图 片 


background repeat: no- repeat; } 
任务 3 在 浏览 器 中 测试 效果 ,如 图 2-11 所 示 。 


图 片 作为 网 页 的 背景 - Windows Internet Explorer 


名 昌 ” 民 riersi\ 图 [后 [x| | 月 可 下 ,他 各 5 
文件 四 。 编辑 到 ) 查看 CD) 收 庆 夫 工具 中 帮助 中 
帘 收 蕊 严 。 逢 图 片 作为 网 页 的 背景 


图 片 作为 网 页 的 背景 
可 以 实现 在 图 像 上 添加 文 
全 矶 本、 图像、 表格 等 网 页 元 


品 
Bo 


图 2-11 添加 CSS 样式 表 后 的 页 面 


案例 2 图 片 作 为 导航 条 的 背景 。 

任务 1 在 HTML 文档 中 添加 DIV 结构 。 

步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标签 之 间 。 
步骤 2 添加 div 标签 内 容 如 下 : 


<div id "dh"> 
<ul> 
<1i> 首 页 < /1i> 
<Jli> 学 院 概况 < /1i> 
<1 这 > 院 系 设置 < Ji> 
<1i> 教 学 工作 < /1i> 
<1 放 学 生 工作 < /li> 
</al> 
</div> 


步骤 3 添加 页 面 的 标题 ,标签 内 容 如 下 : 
<title> 图 片 作为 导航 条 的 背景 < /title> 


步骤 4 在 设计 窗口 中 显示 内 容 如 图 2-12 所 示 。 
任务 2 为 上 述 DIV 结构 创建 CSS 样式 。 
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图 2-12 添加 CSS 样式 表 前 的 导航 条 页 面 


步骤 1 确定 添加 CSS 的 位 置 。 
步骤 2 在 HTML 文档 的 二 head> 标 签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
具体 操作 方法 如 下 : 


#dh { 
background- image: url (../images/dachangtiao.jpg)? 
height: 43px; 
width: 60lpx; 
margin top: 10px; 
margin- right: auto; 
margin- bottam: 10px; 
margin- left: auto;} 

#dhulf 
list- style- type: none;} 

#dhulliif 
float: left; 
margin- right: S50px; 
margin- left: ~ 10px; 
margin top: 15px;} 

任务 3 在 浏览 器 中 测试 效果 ,如 图 2-13 所 示 。 

案例 3 图 片 与 文字 混 排 1 。 

任务 1 在 HTML 文档 中 添加 DIV 结构 。 

步骤 1 在 到 body> 一 /body 标签 之 间 添 加 DIV 结构 ,代码 内 容 如 下 : 


<div i "pl"> 
< img src= "Vimages/zyl 1m302.jpg" widthr "187" height= "150" /> 
<div class= "po"> < /div> // 添 加 文本 
<div id "clear™> < /div> // 清 除 浮动 块 


< img src= "./images/zyl 1m327.jpg" width= "187" height= "155" /> 
<div class= "po"> < /div> // 添 加 文本 
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图 2-13 添加 CSS 样式 表 后 的 导航 条 页 面 
</div> 


步骤 2 在 每 组 二 div class 二 "p2" 之 一 /div 之 代码 之 间 添 加 相应 的 文本 内 容 。 
步骤 3 添加 页 面 的 标题 ,标签 内 容 如 下 : 


<title> 图 片 与 文字 混 排 1< /title> 
步骤 4 在 设计 窗口 中 显示 内 容 如 图 2-14 所 示 。 
DW ED EE | 


ET 


丽江 地 外 我国 西 南边 陵 ， 位 于 去 前 省 洗 北 邯 壕 | 癌 蔷 斋 南 请， 入 及 山 肪 问 去 资 殴 启 北 训 才 下 山 读 这 芒 失 入 稳 地 流 ， 


午 月 随 种 下 
上 地 形 竺 征 ,境内 地 形 地 够 多 样 , 含 识 原 雪山 、 河谷 深 翅 、 草 句 、 平 坝 相 结 合 的 地 禾 特 征 及 自然 录 观 资源 ， 同 时 气候 变化 旺 着 
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图 2-14 添加 CSS 样式 表 前 的 图 文 混 排 页 面 


任务 2 为 上 述 DIV 结构 创建 CSS 样式 。 
步骤 1 确定 添加 CSS 的 位 置 。 
步骤 2 在 HTML 文档 的 二 head 二 标签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
具体 操作 方法 如 下 : 
ing { 
float: left; // 设 置 图 片 左 浮动 
margin top: 10px;} 


height: 350px; 
border: lpx solid # 999;} 
#clear { 
clear: left;} 
Pt{ 
font- size: 14rm; 
text— indent: 2em; 
margin top: 22px; 
margin right: Spex; 
margin left: Sx;} 


任务 3 在 浏览 器 中 测试 效果 如 图 2-15 所 示 。 


图 文 与 文字 混 排 ! - Windows Internet Explorer 


DO- remeriia B ||| [P ER-T, Sat 


| 文件) 多 辑 E) 查看 W) 路 评 天 扩 ) 工具 0) 帮助 0) 


宽 收藏 天 。 | 县 图 广 与 文字 混 排 1 


丽江 地 处 我 国 西南 边 随 ， 位 于 云南 省 西北 部 地 区 。 居 于 青藏 高 
原 南端 、 横 断 山脉 向 云贵 高 原 北部 云 擒 山脉 过 渡 的 衔接 地 段 ， 兼 有 
两 种 以 上 地 形 特征 .境内 地 形 地 萄 多 样 , 含 高 原 到 山河 谷 、 深 峡 、 
草 匈 、 平 坝 相 结 合 的 地 貌 特征 及 自然 景观 资源 ， 同 时 气候 变化 显 


西双版纳 有 我 国 唯一 的 热带 雨林 自然 保护 区 ， 气 候 温暖 湿润 , 
树木 葱 苑 草 蕊 盘根错节， 不 少 珍禽 都 生活 在 这 片 热带 从 里 。 傣 族人 
民 世 代 居住 在 西双版纳 ,由 于 临近 泰国 ,缅甸 等 商 传 佛教 国家 ,小 柔佛 
数 在 这 里 深入 人 心 ， 处 处 可 见 佛 寺 、 佛 塔 ， 傣 族人 基本 上 者 是 虔诚 


| 的 佛教 徒 


图 2-15 


案例 4 图 片 与 文字 混 排 2。 


添加 CSS 样式 表 后 的 图 文 混 排 页 面 


任务 1 在 HTML 文档 中 添加 DIV 结构 。 
步骤 1 鼠标 定位 在 HTML 文档 的 二 body 之 二 /body 之 标签 之 间 。 
步骤 2 添加 div 标签 内 容 如 下 : 


<uU> 


< 1i> < ing src=".Vimages/tul.jpg" alt= "tul" width= "150" height= "150" /> 
<br/> 分 享 硕果 <br/> 王 208 元 < /1i> 

< 1i> < img src=".Vimages/tu2.jpg" width= "150" height= "150" /> 

<br/> 梦 醉 季 节 <br/> 竺 288 元 < /a>< /li> 

< 1i> < img sro= "./imeges/tu3.jpg" alt= "tu3" width= "150" height= "150" /> 


<br/> 浪 漫 时 光 <br/> 竺 188 元 < /a>< /li> 

< 1i> < img src= "Vimages/ta4.jpg" alt= "ta4" 

width= "150" height= "150" /> 

<brA> 粉 色情 缘 <br/> 王 208 元 </a></li> 
</al> 


步骤 3 添加 页 面 的 标题 ,标签 内 容 如 下 : 
<title> 图 片 与 文字 混 排 2< /title> 


步骤 4 在 设计 窗口 中 显示 内 容 如 图 2-16 所 示 。 

任务 2 为 上 述 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 二 head 二 标签 对 之 间 相 应 
的 位 置 输入 定义 的 CSS 样式 代码 ,具体 操作 方法 如 下 : 


ut 
height: 220px; 
width: 700px; 
border: lpx solid # 900; 
list- style- type: none; 
font- size: 13x;} 
if{ 
float: left; 
margin- top: 20px; 
margin left: 10px; 
text- align: oanter;} 
img { 
border: lpx solid # CCC?} 
任务 3 在 浏览 器 中 测试 效果 如 图 2-17 所 示 。 
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图 2-16 添加 CSS 样式 表 前 的 图 片 页 面 
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图 2-17 添加 CSS 样式 表 后 的 图 片 页 面 
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2.2 插入 多 媒体 


221 制作 滚动 的 文本 和 图 片 页 面 
【知识 基础 】 


通过 HTML 的 二 marquee 二 标签 就 能 够 达到 文字 在 网 页 中 移动 的 效果 。 但 是 
二 marquee 记 只 适用 于 Internet Explorer, 除 IE 浏览 器 外 ,其 他 浏览 器 会 忽略 一 marquee 二 
标签 以 及 它 的 属性 。 但 是 并 不 会 忽略 二 marquee 二 标签 内 的 内 容 , 标 签 内 的 内 容 将 以 静态 
的 形式 显示 在 浏览 器 中 。 在 本 节 中 将 结合 实例 学 习 如 何在 页 面 中 制作 滚动 的 文本 或 图 片 。 


1 创建 滚动 文本 


<marquee> 这 是 滚动 的 文本 !< hmarqnee> 


2 设置 滚动 文本 的 属性 

direction: 表示 滚动 的 方向 ,属性 值 可 以 是 left\right\up down, 默 认 值 为 left, 在 不 设 
和 direction 属性 时 ,文字 的 滚动 顺序 为 从 右 向 左 移动 ,代码 如 下 所 示 。 

<marquee direction= "rightw> 文 字 从 左 向 右 滚动 !!!< /marqueey> 

behavior: 表示 滚动 的 方式 ,属性 值 可 以 是 scroll (连续 滚动 ) slide( 滑 动 一 次 )、 
alternate( 来 回 滚动 )。scroll 为 behavior 属性 的 默认 值 ,代码 如 下 所 示 。 

<marquee behavior = "alternate"> 文 字 来 回 滚动 !!!< /marquee> 

loop: 表示 循环 的 次 数 , 值 是 正 整数 .默认 为 无 限 循环 ,代码 如 下 所 示 。 

<marquee loop= "3" bshavior = " scrol1"> 文 字 循 环 滚动 3 次 !!!< /marquee> 

scrollamount: 表示 运动 速度 , 即 滚动 过 程 中 文字 每 次 移动 的 像素 数 , 值 是 正 整 数 , 当 
scrollamount 取 值 较 小 时 ,文字 滚动 的 较 慢 ,反之 文字 滚动 较 快 。 

scrolldelay: 表示 停顿 时 间 , 即 文字 移动 的 延迟 ,以 毫秒 为 单位 , 值 是 正 整数 , 取 值 越 小 ， 
文字 滚动 的 越 快 (文字 滚动 速度 与 计算 机 处 理 能 力 有 关 ) 。 

scrollamount 与 scrolldelay 一 般 在 一 起 使 用 ,代码 如 下 所 示 。 

<marquee scrollamount= "30" > 加 快 文字 移动 速度 !11< /marquee> 

<marquee scrollamount "10" scrolldelay= "200" > 延缓 文字 移动 速度 !1!1< /marquee> 

bgcolor: 表示 滚动 区 域 的 背景 色 ,其 值 可 以 是 RGB 颜色 值 .颜色 名 以 及 十 六 进 制 作 颜 
色 值 ,默认 值 为 白色 ,代码 如 下 所 示 。 

<marquee bgcolor = "yellow" > 滚动 区 域 为 黄色 !!!< /marquee> 

在 浏览 器 中 的 显示 效果 如 图 2-18 所 示 。 

height、width: 表示 滚动 字幕 区 域 的 高 度 和 宽度 , 值 是 正 整 数 (单位 是 像素 ) 或 百分数 ， 
默认 width 一 100% height 为 标签 内 元 素 的 高 度 ,代码 如 下 所 示 。 
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2-18 滚动 区 域 为 黄色 的 效果 图 1 


<marquee width= "400" height= "30" bgoolor= 哗 ff3366"> 宽度 为 400 的 滚动 字幕 效果 !!1< /marquee> 
在 浏览 器 中 的 显示 效果 如 图 2-19 所 示 。 


大 潜 动 字幕 - Windows Internet Explorer 
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图 2-19 滚动 区 域 为 黄色 的 效果 图 2 


hspace、vspace: 表示 滚动 元 素 到 区 域 边界 的 水 平 距离 和 垂直 距离 , 值 是 正 整数 ,单位 是 
像素 ,代码 如 下 所 示 。 

<marquee hspace = "100" vspace= "40" bgcolor= 叭 ff0000"> 滚动 字幕 距离 左右 两 侧 100 像 素 、 距 离 上 下 两 侧 

40 像 素 !11< /marquee> 

onmouseover 一 this. stop() .onmouseout 王 this. start(): 表示 当 鼠 标 移 到 滚动 区 域 的 
时 候 滚动 停止 , 当 鼠 标 移 开 的 时 候 又 继续 滚动 ,代码 如 下 所 示 。 


<marquee width = "100" height= "40" bgoolor= 啡 ff3366" = this.stap() omouseout= this.start ()> 
滚动 字幕 效果 !!!1< /marquee> 


【任务 实施 】 
案例 1 创建 由 左 向 右 的 滚动 字幕 ,移动 速度 为 每 200ms 10px。 
任务 1 在 HTML 文档 中 添加 DIV 结构 。 
步骤 1 鼠标 定位 在 HTML 文档 的 二 body 之 和 /body> 标 签 之 间 。 
步骤 2 添加 div 标签 内 容 如 下 : 


<div id- "gd> 
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< marquee direction= right behavior= scroll scrollamount=10 scrolldelay= 
200> 这 是 一 个 向 右 滚动 的 字幕 。< /rarquee> 
</div> 


步骤 3 添加 页 面 的 标题 ,标签 内 容 如 下 : 
<title> 滚 动 字幕 < /title> 
步 又 4 在 设计 窗口 中 显示 内 容 , 如 图 2-20 所 示 。 
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图 2-20 添加 CSS 样式 表 前 的 滚动 效果 页 面 


任务 2 为 上 述 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 二 head 二 标签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
具体 操作 方法 如 下 : 


#gd{ 
height: 30px; 
width: 500px; 
border: lpx solid # 999; 
background- color: #FFC;} 


任务 3 在 浏览 器 中 测试 效果 ,如 图 2-21 所 示 。 
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这 是 一 个 同 右 滚 动 的 字幕 。 


2-21 添加 CSS 样式 表 后 的 滚动 效果 页 面 


案例 2 创建 由 下 向 上 的 滚动 字幕 ,移动 速度 为 每 100ms 2px。 
任务 1 在 HTML 文档 中 添加 DIV 结构 。 
步骤 1 鼠标 定位 在 HTML 文档 的 二 body 之 二 /body> 标 签 之 间 。 
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步 又 2 添加 div 标签 内 容 如 下 : 


<div id "gd> 
<marquee direction= "down" width= "160" height= "120" behavior= "scroll" scrollampunt= "2" scrolldelay=" 
100"> 使 文字 在 网 页 中 动态 地 滚动 不 只 是 Flash 动画 的 专利 ,通过 滚动 标签 同样 能 够 达到 文字 在 网 页 
中 移动 的 效果 。 


步骤 3 添加 页 面 的 标题 ,标签 内 容 如 下 : 
<title> 滚 动 字幕 < /title> 
步骤 4 在 设计 窗口 中 显示 内 容 , 如 图 2-22 所 示 。 
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图 2-22 添加 CSS 样式 表 前 的 滚动 文字 页 面 


任务 2 为 上 述 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2? 在 HTML 文档 的 一 head> 标 签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
具体 操作 方法 如 下 : 


#gd{ 
height: 120px; 
width: 180pxy 
border: lpx solid # 999; 
background- color: # FEC; 
font- size:13px; 
line~ height:20px; 
text- align:oenter;} 
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使 文字 在 网 页 中 动态 地 滚动 
任务 3 在 浏览 器 中 测试 效果 ,如 图 2-23 所 示 。 人 
案例 3 制作 滚动 图 片 效 果 : 滚动 方向 向 右 , 步 长 

( 即 scrollamount 运动 速度 )1px. 延 迟 99ms ,滚动 区 域 宽 

度 540px, 鼠 标 悬 浮 停 止 运动 , 离 去 继续 运动 。 
任务 1 在 HTML 文档 中 添加 DIV 结构 。 2-23 添加 CSS 样式 表 后 的 
步骤 1 鼠标 定位 在 HTML 文档 的 一 body 二 滚动 文字 页 面 


~ 
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到 
二 /body 标签 之 间 。 
步骤 2 ”添加 div 标签 内 容 如 下 : 


<div id "gg"™> 

<marquee direction= "right" widthr "540" scrollampunt= "5" 
scrolldelay= "99" onmouseover= "this.stop(" 
ormouseout= "this.start ()"> 

< img src= "./images/1.jpg" width= "47" height= "47" /> 
< img src= "./images/2.jpg" width= "47" height= "47" /> 
< img src= "./images/3.jpg" width= "47" height= "47" /> 
< img src= "./images/4.jpg" width= "47" height= "47" /> 
< img src= "./images/5.jpg" width= "47" height= "47" /> 
< img src= "./images/6.jpg" width= "47" height= "47" /> 
< img src= "./images/7.jpg" width= "47" height= "47" /> 
< img src= "./images/8.jpg" width= "47" height= "47" /> 
< img src= "./images/9.jpg" width= "47" height= "47" /> 
< hrarquee> < /div> 


步骤 3 添加 页 面 的 标题 ,标签 内 容 如 下 : 
<title> 滚 动 图 片 < /title> 


步骤 4 在 设计 窗口 中 显示 内 容 , 如 图 2-24 所 示 。 
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2-24 ”添加 CSS 样式 表 前 的 滚动 图 片 页 面 


任务 2 为 上 述 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 二 head> 标 签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
具体 操作 方法 如 下 : 


#gd{ 
height: 60px; 
width: 540px; 
border: lpx solid # 999; 
background- color: # FEC; 
Faddingr top: llpx;} 


任务 3 在 浏览 器 中 测试 效果 ,如 图 2-25 所 示 。 
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滚动 图 片 - Windows Internet Explorer 
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图 2-25 添加 CSS 样式 表 后 的 滚动 图 片 页 面 


222 制作 背景 音乐 页 面 
【知识 基础 】 


Web 中 内 嵌 背 景 音乐 ,在 目前 一 些 Blog 中 经 常用 到 。 使 浏览 者 可 以 轻松 .愉快 地 浏览 
网 页 而 又 给 网 页 增色 不 少 。 在 本 节 中 将 结合 实例 ,学 习 如 何在 页 面 中 添加 背景 音乐 。 

1 <besomd> 标签 

Internet Explorer 自 带 了 一 个 内 置 音频 解码 器 ,支持 特殊 的 标签 二 bgsound 二 ,该 标签 
可 以 把 声音 文件 集成 到 文档 中 ,在 后 台 作 为 背景 音乐 播放 。 

二 bgsound> 标 签 只 能 用 在 Internet Explorer 中 ,其 他 浏览 器 会 忽略 该 标签 。 当 第 一 次 
打开 音频 文件 时 ,这 个 标签 会 下 载 并 播放 音频 文件 。 

(1) 基本 语法 


< bgsound src= "orl'> 
例如 : 
< bgsound src= "sea.mp3"> 


(2) 属性 设置 

因为 bgsound 嵌入 的 音频 文件 在 网 页 中 没有 控件 显示 ,所 以 在 使 用 bgsound 时 , 它 的 
各 个 属性 就 必须 加 以 设置 。 

@ src 属性 是 必需 的 ,用 于 指定 音频 文件 的 位 置 。 

@ 循环 播放 的 语法 和 说 明 。 

语法 格式 : 

loop= 正 整数 或 infinite 

说 明 : 该 属性 规定 音乐 文件 的 循环 次 数 。 属 性 值 为 正 整 数值 时 ,音乐 文件 的 循环 次 数 
与 正 整 数值 相同 ; 

属性 值 为 infinite 时 ,音乐 文件 反复 播放 ,循环 不 止 。 

例如 : 


< bgsound srcr "sea.mp3" loop= "2"> 


se 
A <bgsound srcr "sea.mp3" loop= "infinite"> 


2 <enbed> 标签 

二 embed 二 标签 可 以 用 来 插入 各 种 多 媒体 ,格式 可 以 是 Midi、Wav、AIFF、AU、MP3 
等 。 甚 至 Netscape 及 新 版 的 正 都 支持 。 

(1) 基本 语法 


< enbed src= "url"> 
例如 
< enbed src= "sea.mp3"> 


(2) 属性 设置 

过 embed 标签 包含 很 多 属性 ,这些 属 性 能 够 实现 自动 播放 、 循 环 播放 、 面 板 显示 ` 音 
大 小 等 功能 。 

@ 自动 播放 

语法 格式 : 

autostart= true 或 false 

说 明 : 该 属性 规定 音频 或 视频 文件 是 否 在 下 载 完 之 后 就 自动 播放 。 

true: 音频 或 视频 文件 在 下 载 完 之 后 自动 播放 ; 

false: 音频 或 视频 文件 在 下 载 完 之 后 不 自动 播放 。 

例如 : 


< ebed src= "sea.mp3" autostart= "true"> 
< eribed src= "sea.mp3" autostart= "false"> 
四 循环 播放 

语法 格式 ， 


locp= 正 整数 ,true 或 false 


说 明 : 该 属性 规定 音频 或 视频 文件 是 否 循环 及 循环 次 数 。 
属性 值 为 正 整数 值 时 : 音频 或 视频 文件 的 循环 次 数 与 正 整数 值 相 同 。 
属性 值 为 true 时 : 音频 或 视频 文件 循环 。 

属性 值 为 false 时 : 音频 或 视频 文件 不 循环 。 

示例 : 

< embed src= "sea.mp3 " autostart= "true" loop= "2"> 

< enibed srcr "sea.mp3" autostart= "true" loop= "true"> 

< enibed srcr "sea.mp3" autostart= "true" loop= "false"> 


@ 面板 显示 
语法 格式 : 


higder=trme 或 no 
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了 加 
说 明 : 该 属性 规定 控制 面板 是 否 显示 ,默认 值 为 no。 和 
true: 隐藏 面板 。 
no: 显示 面板 。 
例如 : 
< ertbed src= "sea.mp3" hidden= "true"> // 隐 藏 面板 
< embed srcr "sea.mp3" hidderr "no> // 显 示 面 板 
@ 开始 时 间 
语法 格式 : 


starttime=mm:ss( 分 : 秒 ) 

说 明 : 该 属性 规定 音频 或 视频 文件 开始 播放 的 时 间 。 未 定义 则 从 文件 开头 播放 。 
例如 : 

< emibed src= "sea.mp3" starttime= "00:10"> // 从 第 10s 开 始 播放 

@ 音量 大 小 

语法 格式 : 

volume= 0- 100 之 间 的 整数 

说 明 : 该 属性 规定 音频 或 视频 文件 的 音量 大 小 。 未 定义 则 使 用 系统 本 身 的 设 定 。 
例如 : 

< embed src= "sea.mp3" volume= "10"> 

@ 容器 属性 

语法 格式 : 

height=#width=# 

说 明 : 取 值 为 正 整数 或 百分数 ,单位 为 px。 该 属性 规定 控制 面板 的 高 度 和 宽度 。 
height: 控制 面板 的 高 度 。 

width: 控制 面板 的 宽度 。 

例如 : 

< embed src= "sea.mp3" height= "200" width= "200"> 

@ 容器 单位 

语法 格式 : 

units= pixels 或 en 

说 明 : 该 属性 指定 高 和 宽 的 单位 为 pixels 或 en。 

例如 : 

< embed srcr= "sea.mp3" units= "pixels" height— "200" width "200"> 

< embed srcr "sea.mp3" unitsr "en" height= "200" width= "200"> 


{ Pm so 

i 
ld @ 外 观 设 置 
语法 格式 : 


说 明 : 该 属性 规定 控制 面板 的 外 观 , 默 认 值 是 console。 

console: 一 般 正 常 面 板 。 

smallconsole: 较 小 的 面板 。 

playbutton: 只 显示 播放 按钮 。 

pausebutton: 只 显示 暂停 按钮 。 

stopbutton: 只 显示 停止 按钮 。 

volumelever: 只 显示 音量 调节 按钮 。 

例如 : 

< erbed src= "sea.mp3" controls= "smallconsole"> ”// 显 示 较 小 的 面板 

< enbed src= "sea.mp3" controls= "volumelever"> ”// 只 显示 音量 调节 按钮 

@ 对 象 名 称 

语法 格式 : 

name=# 

说 明 ，# 为 对 象 的 名 称 。 该 属性 用 于 给 对 象 取 名 ,以 便 其 他 对 象 利用 。 

例如 : 

< arbed src= "sea.mp3" name= "soundl"> 

外 说 明文 字 

语法 格式 : 

title=# 

说 明 ，# 为 说 明 的 文字 。 该 属性 规定 音频 或 视频 文件 的 说 明文 字 。 

例如 : 

< enbed src= "sea.mp3" title= 叫 一 首 歌 吃 

@@ 前 景色 和 背景 色 

语法 格式 : 

palette= color| color 

说 明 : 该 属性 表示 嵌入 的 音频 或 视频 文件 的 前 景色 和 背景 色 , 第 一 个 值 为 前 景色 ,第 二 
个 值 为 背景 色 ,中间 用 *|? 隔 开 。color 可 以 是 RGB 颜色 (RRGGBB) ,也 可 以 是 颜色 名 ,还 可 


以 是 transparent( 透 明 ) 。 
例如 : 


< erbed src= "sea.mp3" palette= "red|black"> 


第 2 章 “ 疯 页 画 交 拓 呈 》 


‘153 
@ 对 齐 方式 ad 
语法 格式 : 
说 明 : 该 属性 规定 控制 面板 和 当前 行 中 的 对 象 的 对 齐 方式 。 
center: 控制 面板 居中 。 
left: 控制 面板 居 左 。 
right: 控制 面板 居 右 。 
top: 控制 面板 的 项 部 与 当前 行 中 的 最 高 对 象 的 顶部 对 齐 。 
bottom: 控制 面板 的 底部 与 当前 行 中 的 对 象 的 基线 对 齐 。 
baseline: 控制 面板 的 底部 与 文本 的 基线 对 齐 。 
texttop: 控制 面板 的 顶部 与 当前 行 中 的 最 高 的 文字 顶部 对 齐 。 
middle: 控制 面板 的 中 间 与 当前 行 的 基线 对 齐 。 
absmiddle: 控制 面板 的 中 间 与 当前 文本 或 对 象 的 中 间 对 齐 。 
absbottom: 控制 面板 的 底部 与 文字 的 底部 对 齐 。 
例如 : 


< embed srcr "aea.mp3" align= "top"> // 控 制 面板 项 部 与 当前 行 中 最 高 对 象 顶 部 对 齐 
< erbed src= "sea.mp3" align= "center"> // 控 制 面板 居中 


3 创建 背景 音乐 注意 事项 
(1) 尽量 使 用 网 上 常用 音频 格式 
为 了 更 好 地 在 网 页 中 播放 背景 音乐 ,要 尽量 使 用 浏览 器 所 支持 的 音频 文件 格式 。 如 : 


.mid、. mp3、. wav、. rm,、. ra、. ram、. asf 等 ,其 中 最 常用 的 格式 有 . wav、. mp3 等 。 


(2) 指定 音频 文件 的 位 置 
如 果 音 频 文件 过 多 而 需要 将 音频 文件 存储 在 网 页 文件 的 子 文件 夹 下 。 例 如 ,将 音频 文 


件 保存 在 sounds 文件 夹 中 , 则 指定 路 径 为 : sounds/sea. mp3。 如 果 音 频 文件 与 网 页 文件 在 
同一 个 文件 夹 下 则 直接 指定 音频 文件 位 置 为 : sea. mp3。 


(3) 播放 器 软件 的 链接 
在 浏览 者 的 计算 机 上 可 能 没 播放 网 页 中 音频 文件 的 播放 器 ,所 以 要 在 网 页 中 提供 支持 


音频 文件 播放 器 软件 的 链接 。 如 用 户 计 算 机 不 支持 RM 音频 格式 ,可 以 在 网 页 上 创建 一 个 
www. real. com 的 链接 。 这 样 方便 用 户 下 载 安装 。 


(4) 提供 声音 链接 描述 
当 创 建 一 个 声音 链接 时 ,需要 提供 一 个 相关 的 声音 描述 。 如 音频 长 度 、 音 频 大 致 内 容 等 


信息 ,以便 浏 览 者 决定 是 否 进行 链接 。 
【任务 实施 】 


案例 1 用 二 bgsound 二 标签 给 网 页 添加 背景 音乐 ,要 求 循环 播放 音频 文件 。 
任务 1 在 HTML 文档 中 添加 二 bgsound 记 标签 内 容 。 
步骤 1 鼠标 定位 在 HTML 文档 的 body 之 一 /body> 标 签 之 间 。 


{ oy 
i 
sa 步骤 2 添加 二 bgsound 二 标签 内 容 如 下 : 
<E> 正 在 播放 音乐 : < /p> 
< bgsound src= "images/sea-mp3" loop= "true"> 
步骤 3 添加 页 面 的 标题 ,标签 内 容 如 下 : 
<title> 背 景 音乐 1< /title> 
任务 2 在 浏览 器 中 测试 效果 。 
案例 2 用 二 embed 二 标签 给 网 页 添加 背景 音乐 ,要 求 手动 ,循环 播放 音频 文件 。 
任务 1 在 HTML 文档 中 添加 二 embed 记 标签 内 容 。 
步骤 1 鼠标 定位 在 HTML 文档 的 王 body 之 二 /body 之 标签 之 间 。 
步骤 2 添加 二 embed 二 标签 内 容 如 下 : 
< erbed src= "images/sea.mp3" hidden= "no" units= "pixels" autostart= "false"> 
<div id "con"> 
“embed” 标 签 可 以 用 来 插入 各 种 多 媒体 ,格式 可 以 是 Midi、Wav、AIFF、AU、MP3, 等 
等 ,甚至 Netscape 及 新 版 的 IE 都 支持 。 
</div> 
步骤 3 添加 页 面 的 标题 ,标签 内 容 如 下 : 
<title> 背 景 音乐 2< /title> 


步骤 4 在 设计 窗口 中 显示 内 容 , 如 图 2-26 所 示 。 


Dw mm- © &» | 1 ”I 
坟 本 古本 加， 查看 国 ， 扬 入 GD， 个 训 ”格式 加 命令 加 ”站 点 加 


beijingyinyue2. htal# X 


2-26 ”添加 CSS 样式 表 前 音频 混 排 效果 


任务 2 为 上 述 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 二 head 标签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
具体 操作 方法 如 下 : 


#ocn { 


height: 150px; 
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width: 300px; 

margin- top: 20px; 

margin— bottam: Opx; 

margin- left: 20px; 

Faddingr top:15px; 

Color:# 900; 

font- weight:bold; 

font- size:20px; 

text— indent: 2em; 

background- image: url (images/wybj .jpg); 

background- repeat: no- repeat;} 
emibed { 

margin- left: 20px;} 


任务 3 在 浏览 器 中 测试 效果 ,如 图 2-27 所 示 。 
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embed 标签 可 以 用 来 插入 
各 种 多 媒体 ， 格 式 可 以 是 Midi、 
Wav、AIFF、AU、MP3, 等 等 ， 甚 
至 Netscape 及 新 版 的 IE 都 支持 。 


图 2-27 添加 CSS 样式 表 后 音频 混 排 效果 
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【知识 基础 】 

在 网 页 中 适当 嵌入 视频 能 够 充分 显示 网 页 的 多 媒体 特性 ,特别 是 随 着 宽带 网 的 普及 ,使 
得 网 络 广播 和 网 络 视频 成 为 现实 。 网 页 视频 的 重要 性 也 日 益 凸显 。 在 本 节 中 将 结合 实例 学 
习 如 何在 页 面 中 添加 视频 文件 。 

1 使 用 <enbed 标签 创建 视频 

通过 一 embed> 标 签 可 以 创建 网 页 内 部 视频 ,所 谓 内 部 视频 就 是 视频 文件 可 以 直接 在 
网 页 中 播放 。 

基本 语法 : 


< arbed src= "url"> 


{ sey 


说 明 : 通常 情况 下 ,在 浏览 器 中 内 嵌 的 播放 器 不 能 太 大 ,需要 通过 width 和 height 属性 


来 指定 播放 器 在 网 页 中 的 宽度 和 高 度 。 


此 外 ,还 可 以 通过 autostart 属性 和 loop 属性 设置 视频 播放 的 方式 。 当 autostart 属性 


取 值 为 true 时 , 当 浏 览 者 访问 网 页 时 ,网 页 内 吝 播 放 器 将 自动 播放 视频 文件 。 反 之 ,如 果 
autostart 属性 取 false 时 ,需要 手动 播放 视频 文件 ; 当 loop 属性 取 true 时 ,视频 文件 会 循环 
播放 。 关 于 二 embed 二 标签 的 其 他 属性 请 参阅 2. 2. 2 小 节 中 有 关 embed 的 讲解 。 


.au、 


2 使 用 <ine> 标签 创建 视频 

到 img 二 标签 的 dynsrc 属性 可 以 用 来 插入 各 种 多 媒体 ,格式 可 以 是 . wav、. avi、. aiff、 
. mp3、. ra、. ram 等 。 

(1) 基本 语法 

< img dynsro= "rl"> 

说 明 : url 为 视频 文件 及 其 路 径 , 可 以 是 相对 路 径 或 绝对 路 径 。 
例如 : 

< img dynsrc= "youxi .avi"> 

(2) 属性 设置 

Q@ 预 设 图 片 

语法 格式 : 

Src= Url 


说 明 : url 为 图 片 文件 及 其 路 径 ,可 以 是 相对 路 径 或 绝对 路 径 。 该 属性 的 作用 是 当 视 频 


文件 下 载 时 ,用 图 片 占据 视频 文件 的 显示 位 置 ;视频 文件 下 载 完成 ,图 片 被 屏蔽 ,显示 视频 文 


件 。 


若 指定 dynsrc 为 一 个 音频 文件 之 后 ,src 属性 就 被 屏 项 ,图 片 就 不 可 见 了 。 
例如 : 


< img dynsrc= "youxi .avi" src= "iqimao.jpg'> 


@ 播放 事件 
语法 格式 ， 


start= filecpen, mouseover 


说 明 : 该 属性 规定 了 文件 播放 的 事件 , 缺 省 值 是 fileopen。 两 者 也 可 同时 设置 。 另 外 ， 


用 鼠标 点 击 播放 区 域 ,也 可 令 浏览 器 播放 该 文件 。 


fileopen: 文件 打开 时 。 

mouseover: 鼠标 移 到 播放 区 域 上 时 。 

例如 : 

< img dynasrcr "youxi .avi" start= "fileopen"> 

< img dynsrc= "youxi .avi" start= "mouseover> 

< img dynsrc= "youxi .avi" start- "fileopen,mouseover™> 
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@ 容器 属性 lh 

语法 格式 : 

height=# width=# 

说 明 : 取 值 为 正 整数 或 百分数 。 该 属性 规定 控制 面板 的 高 度 和 宽度 。 

height: 控制 面板 的 高 度 。 

width: 控制 面板 的 宽度 。 

例如 : 

< img dynsrc= "youxi .avi" height= "200" width= "200"> 

@ 说 明文 字 

语法 格式 : 

alt=# 

说 明 ，# 为 说 明文 字 。 

alt 的 值 是 对 动画 文件 的 非 显示 说 明 。 

例如 : 

< img dynsrc= "youxi .avi" alt= "youxi .avi (200KB) "> 

@ 控制 显示 

语法 格式 : 

controls 

说 明 : 用 来 在 视频 窗口 下 附加 MS-Windows 的 播放 控制 条 。 

例如 : 

< img dynsrc= "youxi .avi" controls> 

循环 播放 

语法 格式 : 

locp= 正 整数 或 infinite 

说 明 : 该 属性 规定 视频 文件 的 循环 次 数 ,属性 值 为 一 1 或 infinite 时 ,视频 文件 反复 播 
放 , 循 环 不 止 。 

属性 值 为 正 整 数值 时 : 视频 文件 的 循环 次 数 与 正 整数 值 相同 。 

属性 值 为 infinite 时 : 视频 文件 反复 播放 ,循环 不 止 。 

例如 : 

< img dynsrc= "youxi .avi" loop= "2"> 

< img dynsrc= "youxi .avi" loop= "infinite"> 

延 时 播放 

语法 格式 : 


{ mM so 
5 
a locpdelay=# 

说 明 ，# 为 毫秒 数 。 该 属性 规定 视频 文件 的 延 时 播放 时 间 。 
例如 ， 


< img dynsrc= "youxi .avi" locpdelay= "200"> 


@ 补 白 属 性 
语法 格式 : 


hspace= # vspace=# 

说 明 : 取 值 为 正 整数 ,单位 为 像素 。 两 个 属性 应 同时 应 用 。 
hspace: 画面 离 页 面 左边 的 距离 。 

vspace: 画面 离 页 面 顶部 的 距离 。 

例如 : 


< img dynsrc= "youxi .avi" hspace= "10" vspace= "10"> 


【任务 实施 】 


案例 ”用 二 embed 二 标签 制作 视频 混 排 页 面 。 
任务 1 在 HTML 文档 中 添加 二 embed 之 标签 内 容 。 
步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标签 之 间 。 
步骤 2 添加 二 div 之 标签 内 容 如 下 : 
<div id "shipin"> 
<div id "gow> 金 灿 灿 广 场 舞 【小 可 乐 ] 编 舞 青 儿 _ 在 线 观 看 < /div> 
< embed src= "jincancangew.avi" > < /embed> 
</div> 


步骤 3 在 设计 窗口 中 显示 内 容 , 如 图 2-28 所 示 。 
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2-28 添加 CSS 样式 表 前 的 视频 混 排 页 面 效 果 


任务 2 为 上 述 DIV 结构 创建 CSS 样式 。 
步骤 1 确定 添加 CSS 的 位 置 。 
步骤 2 在 HTML 文档 的 二 head 二 标签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
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具体 操作 方法 如 下 : 


#gcw { 
height: 25px; 
width: 350px; 
background- color:# FEC; 
olor:# 900; 
font— size:15px; 
font- weight:bold; 
Faddingr top:8pe7 
text- align:oenter; } 
# shipin { 
height: 353px; 
width: 350px; 
border: lpx solid # 900;} 
erbed { 
width: 350px; 
height:320px;} 
任务 3 在 浏览 器 中 测试 效果 。 如 果 视 频 只 有 声音 没有 画面 ,可 以 下 载 视频 解码 器 。 
之 后 就 可 以 观看 视频 内 容 。 


224 制作 动画 混 排 页 面 
【知识 基础 】 


Flash 是 Macromedia 公司 推出 的 优秀 的 网 页 动画 制作 软件 。 它 是 一 种 交互 式 动画 设 
计 工 具 , 用 它 可 以 将 音乐 ,声效 .动画 及 富有 新 意 的 界面 融合 在 一 起 ,可 以 制作 出 效果 非常 好 
的 网 上 动画 或 网 页 动态 效果 ,以 增加 网 页 的 动感 ,使 浏览 者 不 会 感到 单调 乏味 。 

Flash 动画 是 一 种 矢量 动量 ,具有 体积 小 .图 像 质量 高 的 特点 ,非常 适合 在 网 页 中 使 用 。 
要 在 浏览 器 中 播放 Flash 动画 ,浏览 器 中 就 必须 具有 相应 的 插件 与 控件 。 目 前 的 浏览 器 中 
都 集成 了 相应 的 插件 或 控件 。 在 本 节 中 将 结合 实例 学 习 如 何在 页 面 中 制作 滚动 的 文本 或 
图 片 。 

1 插入 Bat 

在 网 页 文档 中 插入 Flash 电影 时 ,Dreamweaver 将 所 有 被 使 用 的 代码 显示 在 “对 象 " 标 
记 和 ”* 舱 套 ? 标 记 中 。 插 入 Flash 电影 后 可 以 直接 预览 效果 。 


2 设置 Hah 属 性 

“名 称 ” 属 性 : 指定 要 加 载 的 SWF 文件 的 名 称 。 

“ 宽 " 和 “高 "属性 : 修改 Flash 对 象 的 宽度 和 高 度 ,单位 为 像素 。 

“文件 ”参数 : 指定 要 加 载 的 SWF 文件 的 来 源 , 确 定 指向 该 Flash 文件 的 路 径 。 
“背景 颜色 ”属性 : 设置 Flash 对 象 的 背景 颜色 。 

“类 ?属性 : 选择 应 用 于 Flash 的 CSS 样式 。 

“编辑 ”按钮 : 如 果 指 定 了 外 部 编辑 器 , 单 击 可 以 启动 外 部 编辑 器 。 如 果 计 算 机 上 没有 


{ sy 


安装 Macromedia Flash, 此 按钮 将 被 禁用 。 

“自动 播放 ”属性 :( 可 选 ) 指 定 是 否 在 浏览 器 中 加 载 时 就 开始 播放 。 

“循环 ”属性 : 选中 该 项 表示 影片 将 连续 播放 ;否则 ,播放 一 次 后 立即 停止 播放 。 

“垂直 边 距 ”和 “水 平 边 距 ” 属 性 : 指定 选中 的 Flash 相对 于 “文档 窗口 ”或 选中 的 Flash 
相对 于 另 一 个 Flash 之 间 的 上 、 下 、 左 、 右 空白 的 像素 值 。 

“品质 ”属性 : 设置 播放 Flash 对 象 的 播放 质量 。 包 括 低 品 质 、 高 品质 、 自 动 低 品 质 和 自 
动 高 品质 。 

低 品质 : 注重 速度 而 非 外 观 。 

高 品质 : 注重 外 观 而 非 速度 。 

自动 低 品 质 : 在 保证 速度 的 前 提 下 ,如 果 可 能 则 改善 外 观 。 

自动 高 品质 : 意味 着 首先 看 重 品质 ,但 根据 需要 可 能 会 因为 速度 而 影响 外 观 。 

“比例 ?属性 : 设置 Flash 对 象 的 缩放 方式 。 

“对 齐 ” 属 性 : 设置 Flash 对 象 的 对 齐 方式 。 

“wmode” 属 性 : 可 以 利用 Internet Explorer 中 的 透明 Flash 内 容 、 绝 对 定位 和 分 层 显示 
的 功能 。 此 标识 标记 仅 在 带 有 Flash Player ActiveX 控件 的 Windows 中 有 用 。 

“播放 ”按钮 : 预览 Flash 电影 时 控制 播放 和 停止 。 

“参数 "按钮 : 打开 “参数 ”对 话 框 ,可 以 在 其 中 输入 附加 参数 。 


【任务 实施 】 
案例 按 样 文 样式 ,在 图 2-29 所 示 页 面 中 插入 Flash 吕 [=] Ed 
文件 。 _ OO Ere | 
任务 1 在 HTML 文档 中 添加 二 div 之 标签 内 容 。 文件 四 ”编辑 名 ”查看 咏 收藏 天 人 


步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 
标签 之 间 。 
步 又 2 ”添加 二 div 二 标签 内 容 如 下 : 
<div id "fla"> 
< 了 相片 < /p> 
</div> 
步骤 3 ”为 页 面 添加 Flash 动画 ,具体 操作 如 下 所 示 。 
光标 定位 在 二 /div 二 之 前 , 单 击 “ 插 入 栏 ” 中 “媒体 ” 选 
项 下 的 “SWF” 选 项 ,进入 “SWF 选项 ”对话 框 ,查找 要 插入 2-29 样 文 页 面 效果 
的 动画 文件 后 单 击 “确定 ”按钮 ,并 保存 在 站 点 根 文件 夹 下 
的 相应 文件 夹 。 
在 “设计 ”视图 下 ,会 出 现 所 插入 的 Flash 动画 缩 略 图 。 同 时 ,代码 ”视图 下 产生 如 下 所 
示 的 一 段 代 码 。 
< dbject id= "FlashID" classid= "clsidq:D27CDB6E- PE6D- 11cf— 96B8- 444553540000" 
width= "210" height= "130"> 
< param namer= "movien value= "./images/1.swf" /> 


<Param name= "quality" value= "high" /> 
< param namer= "wmpde" value= "opaque" /> 
< param namer "swfversion" valuer "9.0.45.0" /> 
< 上 -- 此 param 标签 提示 使 用 Flash Player 6.0 r65 和 更 高 版 本 的 用 户 下 载 最 新 版 本 的 Flash 
Player。 如 果 您 不 想 让 用 户 看 到 该 提示 ,请 将 其 删除 。- 一 > 
< param name= "expressinstall" value= "Scripts/expressInstal1.swf" /> 
< 上 -下 一 个 对 象 标签 用 于 非 下 浏览 器 。 所 以 使 用 IEoc 将 其 从 正 隐 藏 。- -> 
< = DED- 
< dbject type= "application/x- shockwave— flash" data= "images/1.swf" 
width= "210" height= "130"> 
<!--<1![endif]- 一 > 
< param name= "quality" value= "high" /> 
< param name= "wmpde" value= "opaque" /> 
< param name= "swfversion" value= "9.0.45.0" /> 
< param name= "expressinstall" value= "Scripts/expressInstall.swf" /> 
< 上 -浏览 器 将 以 下 替代 内 容 显示 给 使 用 Flash Player 6.0 和 更 低 版 本 的 用 户 。- -> 
<div> 
<E><ahre 人 "http://www.adcbe.caygo/getflashplayer"> < img src= 
"http://www.adcbe.om/ images/shared/download buttons/get flash 
player.gif" alt= " 哈 取 Pdcbe Flash Player" width= "112" height= "33" /> 


</a></E> 
</div> 
<Il-= Ey==> 
< /cbject> 
<!--<![endif]--> 
< /chject> 


步骤 4 添加 页 面 的 标题 ,标签 内 容 如 下 : 
<title> Flash 动 画 混 排 < /title> 


步骤 5 在 设计 窗口 中 显示 内 容 , 如 图 2-30 所 示 。 
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图 2-30 添加 CSS 样式 表 前 的 Flash 文件 播放 页 面 效果 
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任务 2 为 上 述 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 二 head 二 标签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
具体 操作 方法 如 下 : 


#fla #FlashID { 
border: 2px solid # 999;} 
#flap{ 
font— size: 15px; 
font- weight: bolg; 
color: # 900;} 
#fla { 
height: 200px; 
width: 240px; 
border: lpx solid # 999; 
text- align: oanter;} 


任务 3 在 浏览 器 中 测试 效果 。 


2.3 任务 拓展 


利用 前 面 学 过 的 图 文 混 排 知识 ,设计 制作 如 图 2-31 所 示 的 图 文 混 排 效果 。 


/图 文 混 排 任务 拓展 - Windows Internet Explorer 
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图 2-31 图 文 混 排 效果 
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[> 
2.4 本 章 小 结 


本 章 主 要 介绍 了 编辑 网 页 文本 、 图 片 和 媒体 等 的 基本 标签 ,以 及 怎样 编排 文本 页 面 、 制 
作 滚 动 的 文本 和 图 片 页 面 .图 文 混 排 页 面 、 视 频 混 排 页 面 和 动画 混 排 页 面 等 效果 。 本 章 内 容 
是 学 习 制 作 网 页 的 重点 内 容 , 完 美的 网 页 离 不 开 图 像 和 媒体 对 象 ,结合 本 章 提 供 的 相关 实 
例 , 还 需要 进一步 加 以 练习 。 


习 题 
一 、 填空 题 
(1) 设置 背景 音乐 除了 使 用 bgsound 标记 外 ,还 可 以 使 用 的 标记 是 
(2) HTML 代码 二 OL 二 /OL 过 表示 创建 一 个 列表 。 
(3) 在 插入 图 片 标记 中 ,对 插入 的 图 片 进行 文字 说 明 使 用 的 属性 是 
(4) 在 HTML 中 ， 标记 用 来 说 明 一 些 与 HTML 文档 有 关 的 信息 ,例如 文档 的 
作者 、 关 键 内 容 、 所 用 语言 等 。 

二 、 选择 题 
(1) 下 列 元 素 不 可 以 被 加 载 到 网 页 中 的 是 ( 和 

A. 文本 B. jpg 图 片 C. gif 图 片 D. 3DMAX 文件 
(2) 在 互联 网 上 最 为 常用 的 图 片 格式 是 ( 汪 

A. JPEG 和 PSD B. PNP 和 BMP 

C. AVI 和 FLASH D. GIF 和 JPEG 


(3) 下 列 标记 中 ,字体 最 小 的 是 ( )。 


A. <H1> 了 及 <H3> C. =H5> D. <Hé6> 
(4) 不 能 使 文字 换行 的 标记 是 (。”)。 

A. <PRE> B. <BR> C. <P> D. =div> 
(5) 二 img src 一 "name" align 二 "left" 放 意思 是 ( 加 

A. 图 像 向 左 对 齐 B. 图 像 向 右 对 齐 

C. 图 像 与 底部 对 齐 D. 图 像 与 顶部 对 齐 
(6) 若 要 在 浏览 器 的 标题 栏 显示 文字 ,应 该 使 用 的 标记 是 ( 和 

A. <TITLE> B. <BODY>> C. <A> D. <HEAD> 
三 、 判断 题 


(1) 若 某 网 页 背景 颜色 设置 为 并 FFFFF, 则 背景 的 颜色 为 黑色 。( 

(2) GIF 动画 的 文件 大 小 相对 较 大 , 若 用 Flash 导入 后 转换 为 矢量 动画 就 可 缩小 。( ) 

(3) 在 追求 速度 为 先 的 网 页 设计 时 ,可 以 多 用 图 像 ,在 追求 美观 为 先 的 网 页 设计 时 ,可 
以 多 用 文字 。( 。 ) 


链接 与 导航 设计 $, 


超级 链接 可 以 将 网 页 与 其 他 内 容 连 接 在 一 起 ,使 内 容 融入 网 站 中 ,为 网 页 与 用 户 之 间 构 
建 一 个 应 用 的 平台 。 在 网 站 中 , 超 链接 常用 于 页 面 间 的 跳 转 ,帮助 用 户 从 一 个 页 面 跳 转 到 另 
一 个 页 面 。 网 站 导航 是 超级 链接 技术 的 具体 应 用 ,是 网 站 重要 的 组 成 部 分 。 
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本 章 要 点 


3.1 关于 超 链接 


超 链 接 是 网 页 的 重要 组 成 部 分 。 正 是 由 于 有 了 超 链接 , 才 组 成 了 庞大 的 互联 网 ,人 们 才 
能 感受 到 网 上 冲浪 的 乐趣 。 


3L1 理解 超 链接 


在 网 页 中 , 超 链接 通常 以 文本 或 图 像 的 形式 出 现 。 用 鼠标 指针 指向 网 页 中 的 超 链 接 时 ， 
鼠标 指针 会 变 成 手指 状 ; 单 击 超 链接 时 ,浏览 器 就 会 按照 超 链 接 指 示 的 目标 载 和 另 一 个 网 
页 ,或 者 跳 转 到 同一 网 页 或 其 他 网 页 中 的 其 他 位 置 。 

超 链接 是 由 源 端 点 (热点 ) 到 目标 端点 的 一 种 跳 转 。 源 端点 可 以 是 一 段 文本 或 一 幅 图 像 
等 。 目 标 端 点 可 以 是 任意 类 型 的 网 络 资源 ,例如 可 以 是 一 个 网 页 .一 幅 图 片 、 一 首 歌曲 、 一 个 
动画 或 一 段 程序 。 

按照 目标 端点 的 不 同 ,可 以 将 超 链接 分 为 文件 链接 、 锚 点 链接 (书签 )、E-mail 链接 。 

文件 链接 : 这 种 链接 的 目标 端点 是 网 页 中 的 一 个 文件 , 它 可 以 位 于 当前 网 页 所 在 的 服 
务 器 ,也 可 以 位 于 其 他 的 服务 器 。 

锚 点 链接 : 类 似 于 书签 的 功能 ,这 种 链接 的 目标 端点 是 网 页 中 的 一 个 位 置 ,通过 这 种 链 
接 可 以 从 当前 网 页 跳 转 到 本 页 面 或 其 他 页 面 指定 位 置 ( 锚 点 )。 

E-mail 链接 : 通过 这 种 链接 可 以 启动 电子 邮件 客户 端 程序 (如 Outlook 或 FoxMail 
等 ), 并 允许 访问 者 向 指定 的 地 址 发 送 邮 件 。 


3.12 理解 路 径 


路 径 是 指 从 站 点 根 文件 夹 或 当前 文件 夹 起 到 目标 文件 夹 所 经 过 的 路 线 , 可 以 使 用 路 径 
来 指定 超 链接 中 目标 端点 的 位 置 。 

绝对 路 径 : 给 出 目标 文件 的 完整 URL 地 址 ,如 果 要 链接 的 目标 文件 位 于 其 他 的 服务 器 
上 , 则 必须 使 用 绝对 路 径 。 如 : 协议 :// 域 名 /文件 夹 /目标 文件 。 

相对 路 径 : 以 当前 文档 为 起 点 到 目标 文件 所 经 过 的 路 径 , 一 般 用 在 当前 文档 与 目标 文 
件 处 在 同一 站 点 下 。 源 文件 与 目标 文件 处 在 同一 文件 夹 内 ,直接 链接 目标 文件 即 可 ; 若 要 与 
同一 文件 中 的 其 他 文件 夹 下 的 文件 做 链接 , 则 应 提供 文件 名 称 , 如 : 文件 夹 /目标 文件 ; 若 要 
与 源 文件 所 在 文件 夹 同 级 文件 夹 中 的 文件 链接 , 则 应 提供 文件 返回 上 级 符号 和 文件 夹 名 称 ， 
如 : ../ 文 件 夹 名 /目标 文件 。 


313” 创 建文 件 链接 
在 XHTML 中 ,使 用 二 a 二 标记 来 创建 超 链接 ,基本 语法 格式 如 下 : 
<a href= "地址 " name=" 字 符 串 " target= "打开 窗 口 方式 "> 源 端 点 < /a> 
上 述 语法 格式 包含 二 a 二 标记 的 以 下 属性 如 表 3-1 所 示 。 

表 3-1 一 a 标记 属性 说 明 
属 性 | 属性 值 描 述 
href url 为 超 文本 引用 , 它 的 值 为 一 个 url, 是 目标 端点 的 有 效 地 址 


name “| 文本 字符 串 | 指定 当前 文档 内 的 一 个 字符 串 作 为 链接 时 可 以 使 用 有 效 的 目标 端点 地 址 


title 文本 字符 串 | 设置 指定 指向 超 链接 时 所 显示 的 提示 信息 


在 新 窗口 打开 目标 文件 。 这 种 方式 很 常见 , 它 可 以 在 打开 目标 文档 后 ,原来 的 文 


-nx | 档 窗口 依然 存在 


_self 在 当前 窗口 打开 目标 文件 。 这 和 省 略 target 属性 是 一 样 的 。 


本 在 父 窗口 打开 目标 文件 。 这 种 方式 用 于 框架 型 网 页 , 它 可 以 使 目标 文档 跳出 框 
二 架 , 在 框架 的 上 一 层 窗口 打开 


target 


在 顶层 窗口 打开 目标 文件 。 用 于 框架 型 网 页 。 通 常情 况 下 , 父 窗口 就 是 顶层 窗 
_top 口 ,但 如 果 框 架 内 还 嵌 有 框架 ，parent 和 _top 就 不 同 了 ,用 _top 可 以 使 目标 文档 
跳出 所 有 框架 ,在 浏览 器 窗口 打开 


在 指定 窗口 打开 目标 文件 。 可 用 于 框架 型 网 页 或 用 open 打开 的 窗口 。 在 框架 
窗口 名 型 网 页 中 ,各 个 框架 窗口 一 般 都 用 name 属性 指定 了 名 称 , 如 果 想 让 目标 文档 在 
指定 框架 打开 ,可 以 使 用 这 种 方式 


去 a> 标 记 的 target 属性 指定 了 目标 文档 的 打开 位 置 , 如 果 没 有 指定 此 属性 ,默认 在 当 
前 窗口 打开 。 


和 (人 
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3.2 利用 文字 实现 超级 链接 


为 文字 添加 超 链接 是 最 常用 的 一 种 添加 超级 链接 的 方法 ,相对 于 图 片 . 动 画 而 言 ,文字 
是 最 基本 也 是 含 信息 量 最 大 的 网 页 元 素 ,文字 超 链接 会 更 加 方便 浏览 者 查阅 信息 。 添 加 了 超 
链接 后 的 文字 有 其 特殊 的 样式 ,以 和 其 他 文字 区 分 ,默认 链接 样式 为 蓝 色 文字 ,有 下 划 线 。 


321 制作 面包 层 导 航 


【知识 基础 】 


面包 屑 (Breadcrumb ,也 称 为 面包 习 路 径 ) ,典故 来 源 于 (格林 童话 ) 中 的 “奇幻 森林 历险 
记 ”, 故 事 的 两 个 小 主人 公 汉 赛 尔 与 格 莱特 在 森林 里 留 下 一 路 面包 必 ,以 便 能 顺 着 这 条 路 径 
找到 回 家 的 路 。 在 网 站 页 面 的 应 用 中 ,面包 恬 的 隐喻 就 是 为 用 户 提供 一 种 追踪 返回 最 初 访 
问 页 面 的 路 径 。 这 可 以 告诉 你 在 网 站 的 当前 位 置 。 这 是 二 级 导航 的 一 种 形式 ,辅助 网 站 的 
主导 航 系统 。 

面包 履 导 航 ( 见 图 3-1) ,对 于 多 级 别 具 有 层次 结构 的 网 站 特别 有 用 。 用 于 展示 用 户 访 
问 网 站 的 路 线 , 由 一 大 串 的 元 素 和 节点 组 成 。 每 个 节点 都 与 指向 先前 访问 过 的 页 面 或 父 级 
(上 一 级 ) 主 题 相 连 ,节点 间 以 符号 分 隔 , 通 常 是 大 于 号 (二 )、 冒 号 (:)、 竖 线 (|)。 它们 可 以 帮 
助 访 问 者 了 解 到 当前 自己 在 网 站 中 所 处 的 位 置 。 如 果 访 客 希 望 返回 到 某 一 级 ,它们 只 需要 
点 击 相应 的 面包 导 导 航 项 。 
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3-1 面包 悄 导 航 示例 


一 般 格 式 是 水 平 文字 链接 列表 ,通常 在 两 项 中 间 伴 随 着 左 箭头 以 指示 层 及 关系 ,级 别 从 
左 至 右 , 逐 级 降低 ,从 不 用 于 主导 航 。 

面包 履 不 适 于 级 别 浅 导 航 网 站 。 当 网 站 没有 清晰 的 层次 和 分 类 的 时 候 ， 人 
产生 混乱 。 面 包 丑 导航 最 适用 于 具有 清晰 章节 和 多 层次 分 类 内 容 的 网 站 。 没 有 明显 的 章 
节 , 使 用 面包 履 是 得 不 偿 失 。 
【任务 实施 】 


案例 制作 面包 导 导 航 。 
任务 1 插入 DIV 标签 。 
步骤 1 新 建 网 页 文件 ,插入 div 标签 ,并 命名 为 nav。 


<div id- mavw> 此 处 显示 ia "nav" 的 内 容 < /div> 
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步骤 2 添加 nav 样式 。 
主要 对 宽 、 高 ,字号 \ 行 高 等 样式 进行 设置 。 
#nav { 
height: 25px; 
width: 700p; 
font— size: 13pe; 
line~ height: 25px; 
color: # 333; 
Paddingr left: 50px; 
六 
任务 2 添加 链接 项 。 
步骤 1 添加 导航 文本 ,并 添加 空 链接 。 


<div id "nav"> 
当前 位 置 : <a hre 伍 叶 吃 首页 < /a> -sgt;<a hre 伍 叶 吃 国内 景点 < /a> - sgt; 长 白山 
< /div> 


页 面 浏览 如 图 3-2 所 示 。 
步 又 2 添加 链接 样式 。 


a:link { 
text- decoration: none; 
color: #F00; 
} 
a:visited { 
text— decoration: none; 
color: #F00; 
} 
a:hover { 
color: #00F; 
text— decoration: underline; 
} 


任务 3 测试 浏览 如 图 3-3 所 示 。 


当前 位 置 : 首页 > 国内 是 点 > 长 白山 当前 位 置 : 首页 > 国内 景点 > 长 白山 
图 3-2 ”编辑 链接 文本 3- 3 面包 习 导 航 


322 制作 水 平 栏 导航 


【知识 基础 】 

水 平 栏 导航 ( 见 图 3-4) 是 当前 最 流行 网 站 导航 菜单 设计 模式 。 常 用 于 网 站 的 主导 航 菜 
单 , 且 最 通常 地 放 在 网 站 所 有 页 面 的 直接 上 方 或 直接 下 方 。 水 平 栏 导 航 设计 模式 有 时 伴随 
着 下 拉 菜 单 , 当 和 鼠标 移 到 某 个 项 上 时 弹出 其 下 面 的 二 级 子 导 航 项 。 
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图 3-4 ”水平 栏 导航 


1 水平 栏 导航 特征 
导航 项 是 文字 链接 ,按钮 形状 ,或 者 选项 卡 形状 。 水 平 栏 导 航 通常 直接 放 在 邻近 网 站 
Logo 的 地 方 它 通常 位 于 折 释 之 上 ,水 平 栏 导航 结构 如 图 3-5 所 示 。 


Item1 Item2 Item3 Item4 Item5 


图 3-5 ”水平 栏 导航 结构 特征 


2 水 平 栏 导 航 的 缺点 

顶部 水 平 栏 导 航 最 大 的 缺点 就 是 它 限 制 了 你 在 不 采用 子 级 导航 的 情况 下 可 以 包含 的 链接 
数 。 对 于 只 有 几 个 页 面 或 类 别 的 网 站 来 说 ,这 不 是 什么 问题 ,但 是 对 于 有 非常 复杂 的 信息 结构 
且 有 很 多 模块 组 成 的 网 站 来 说 ,如 果 没 有 子 导 航 的 话 ,这 并 不 是 一 个 完美 的 主导 航 菜单 选择 。 


【任务 实施 】 


案例 ”制作 文字 水 平 栏 导航 。 
任务 1 插入 DIV 标签 。 
步骤 1 新 建 网 页 文件 ,插入 div 标签 ,并 命名 为 nav。 


<div id mav"> 此 处 显示 ia "nav" 的 内 容 < /div> 
步 又 2 设置 通配符 (* ) 样 式 ,清除 所 有 标签 的 边 距 和 补 白 。 
* { 
margin: Opx; 
Padding: Opx; 
} 


步骤 3 添加 nav 样式 。 
主要 对 背景 、 宽 ,高 ,边框 .字号 、 行 高 等 样式 进行 设置 。 


border: lpx solid # 333; 
font— size: 15px; 
line— height: 35px; 
font- weight: bold; 
margin- left: auto; 
margin- right: auto; 

条 


页 面 浏览 如 图 3-6 所 示 。 


| 此 处 显示 ia “nav” 的 内 容 


图 3-6 nav 导航 条 


任务 2 编辑 链接 项 。 
步骤 1 编辑 导航 文本 ,并 添加 空 链接 。 


<div id nav> 
<ul> 
<li><ahre 伍 哇 吃 首页 </a></li> 
<li><ahre 伍 哇 吃 国内 景点 < /a>< /li> 
<li><ahre 伍 叶 吃 热门 景点 < /a></li> 
<1li><a hre 人 = 嘲 "> 服 务 信息 < /a>< /li> 
<li><ahre 伍 哇 > 联 系 我 们 < /a>< /li> 
</ul> 
</div> 


页 面 浏览 如 图 3-7 所 示 。 


图 3-7 垂直 对 齐 的 导航 文本 


步骤 2 添加 列表 样式 ,使 列表 项 由 垂直 对 齐 变 为 水 平 对 齐 , 并 设置 列表 项 高 度 、 宽 
度 等 。 
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页 面 浏览 如 图 3-8 所 示 。 


首页 “国内 景点 热门 旦 点 。 ”服务 信息 。 ”联系 我 们 


图 3-8 水 平 对 齐 的 导航 文本 


步骤 3 设置 链接 样式 。 


#navul liat{ 
display: inline block; 
width:100%; 

} 

a:link { 
text— decoration: none; 
color: #000; 

} 

a:hover { 
Color: #FFF; 
background- color: # 06C; 

} 


页 面 浏览 如 图 3-9 所 示 。 


首页 国内 景点 服务 信息 联系 我 们 


图 3-9 文字 水 平 栏 导航 


323 制作 书签 导航 


【知识 基础 】 


当 网 页 的 页 面 较 长 , 且 该 页 面 是 由 几 个 部 分 组 成 ,不 得 不 拖 动 浏览 器 的 滑动 条 查看 信 


息 , 既 麻烦 又 费时 。HTML 恰好 提供 了 跳 转 功能 ,能 够 非常 方便 ,快捷 地 实现 从 网 页 当前 的 
部 分 跳 转 到 同一 网 页 的 另 一 部 分 。 书 签 链接 常常 被 用 来 跳 转 到 特定 的 主题 或 文档 的 顶部 ， 
使 访问 者 能 够 快速 浏览 到 选 定 的 位 置 , 加 快 信息 检索 速度 。 


1 同一 页 面 间 的 书签 超 链接 

实现 在 同一 网 页 中 建立 超 链接 ,首先 要 通过 name 属性 给 要 链接 的 目的 区 域 建立 书签 。 
语法 格式 : 

<a name- "书签 名 称 "> 链接 内 容 < /a> 

创建 完 书 签 后 ,开始 创建 书签 超 链 接 。 

语法 格式 : 

<ahre 人 只 书签 名 称 " target- " 痊 口 名 称 必 链接 标题 < /a> 

其 中 ,“#” 表 示 “ 书 签名 称 ” 指 向 当前 文档 内 命名 为 “书签 名 称 ” 的 目的 区 域 。 
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2 不 同 页 面 间 的 书签 超 链接 

书签 超 链接 还 可 以 在 不 同 页 面 间 进 行 。 当 单 击 书 签 超 链接 标题 时 ,页 面 会 根据 链接 中 
的 href 属性 所 指定 的 地 址 ,将 网 页 跳 转 到 目标 地 址 中 书签 名 称 所 表示 的 内 容 。 

创建 书签 的 方法 与 在 同一 页 面 中 创建 书签 相同 。 

语法 格式 : 


<a name= "书签 名 称 "> 链接 内 容 < /a> 


创建 书签 超 链接 时 要 指明 所 链接 文件 的 URL 地 址 。 
语法 格式 ， 


<a href= "URL # 书 签名 称 " target= 嘛 口 名 称心 链接 标题 < /a> 


【任务 实施 】 


案例 制作 目录 导航 页 面 。 
任务 1 在 HTML 文档 中 添加 DIV 结构 。 
步骤 1 添加 div 标签 ,并 命名 为 text。 
步骤 2 编辑 div 标签 内 容 。 
<div id "text"> 
<h2> 百 度 服务 内 容 < /h2> 
<h3><a name= 叶 top'> 目 录 < /a>< /h3> 
<E><a href= 叶 sl">1. 服 务 条 款 的 确认 和 接纳 < /a>< /p> 
<p><a href= 啡 s2"> 2. 服 务 条 款 的 修改 </a> < /p> 
<EP<ahre 人 后 嘎 s3"> 3. 用 户 的 账号 、 密 码 和 安全 性 < /a>< /p> 
<E><a hre 伍 啡 s4"> 4. 服 务 风 险 制度 < /a>< /p> 
<p><a hre 伍 叶 s5"> 5. 用 户 管理 < /a> < /p> 
<EP<ahre 全 啡 s6"> 6. 用 户 必须 遵守 的 法 律 和 政策 < /a>< /p> 
<P> 百 度 网 络 服务 的 具体 内 容 由 百度 根据 实际 情况 提供 。 除 非 本 服务 协议 另 有 其 他 明示 规定 ， 
oj 
<E> 只 需要 接受 以 下 服务 条 款 ,就 可 以 使 用 百度 消息 服务 < /p> 
<h3><aname= 啡 sl">1. 服 务 条 款 的 确认 和 接纳 </a></h3> 
<E 百 度 消息 服务 所 有 权 及 经 营 权 为 百度 网 讯 科技 有 限 公 司 (以 下 简称 “百度 公司 ”) 所 有 。…… </ 
pp 
<ahref= 啡 top> 返 回 目录 < /a>< /p> 
<p><a name= 啡 32"> 2. 服 务 条 款 的 修改 < /a>< /h3> 
< 百度 公司 有 权 在 必要 时 修改 本 服务 条 款 ,服务 条 款 一 旦 发 生变 动 , 将 会 在 相关 页 面 上 公布 修改 
后 的 服务 条 款 。…… </p 
<p><ahre 伍 哇 top"> 返 回 目录 < /a>< /p> 
<p><a name=- 啡 33"> 3. 用 户 的 账号 、 密 码 和 安全 性 < /a>< /h3> 
< 户 用 户 的 账号 密码 为 用 户 在 百度 贴吧 首页 或 者 知道 首页 注册 的 账号 、 密 码 , 用 户 应 妥善 保管 。 


<p><ahre 伍 啡 top"> 返 回 目录 < /a>< /p> 


sy 
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<p><a name= 啡 st"> 4 服务 风险 制度 < /a>< /h3> 

< 户 使 用 百度 消息 服务 的 用 户 个 人 自行 承担 全 部 风险 。…… < 人 位 

<E><ahre 全 啡 top> 返 回 目录 < /a></p> 

<h3><a name= 叶 35"> 5. 用 户 管理 < /a>< /hb3> 

< 了 人 用户 单独 承担 发 布 内 容 的 责任 。 百 度 不 对 任何 有 关 信息 内 容 的 真实 性 ,适用 性 、 合 法 性 承担 责 
es 


<p><ahre 伍 啡 top> 返 回 目录 < /a>< /p> 

<h3><a name= 嘲 36"> 6. 用 户 必须 遵守 的 法 律 和 政策 < /a> < /h3> 

< 了 用 户 使 用 百度 消息 服务 必须 遵守 国家 有 关 法 律 和 政策 等 ,维护 国家 利益 ,保护 国家 安全 ，…… 
</P 

<EP<ahre 全 啡 tcp"> 返 回 目录 < /a>< /p> 


</div> 


在 编辑 状态 下 ,显示 内 容 如 图 3-10 所 示 。 


yl， 服务 条 款 的 确认 和 接纳 


百度 消息 服务 所 有 权 及 经 营 权 为 百度 网 讯 科技 有 限 公司 《以 下 简称 百度 公司 ") 所 有 。 用 户 
硅 自 原 开始 使 用 百度 消息 服务 之 前 ， 必 须 仔细 辣 读 并 接受 本 服务 条 款 。 一 经 激活 百度 消息 
报 务 功能 ， 则 视 为 对 本 服务 全 部 条 款 的 认 知 和 接受 。 | 


2， 服务 条 款 的 修改 


人 百度 公司 有 权 在 必要 时 修改 本 服务 条 款 ， 服 务 条 款 一 旦 发 生变 动 ， 将 会 在 相关 页 面 上 公布 | 
修改 后 的 服务 条 款 。 如 果 不 同意 所 改动 的 内 容 ， 用 户 应 主动 取消 百度 消息 服务 。 如 果 用 户 | 
丝 续 使 用 百度 消息 服务 ， 则 视 为 接受 服务 条 款 的 变动 。 | 


.用 户 的 贝 号 、 密 码 和 安全 性 


用 户 的 账号 、 密 码 为 用 户 在 百度 贴吧 首页 或 者 知道 首页 注册 的 账号 、 密 码 ， 用 户 应 及 善 保 | 
管 。 同 时 ， 每 个 用 户 都 要 对 其 消息 中 的 所 有 内 容 负 完 全 责任 。 用 户 可 自行 决定 更 换 密码 。 
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图 3-10 编辑 状态 下 的 页 面 效 果 


任务 2 添加 CSS 样式。 


#text { 
font- size: 14px; 
line— height: 28px; 
width: 700px; 
margin- top: 10px; 
margin- right: auto; 
margin- bottom: 10pe; 
margin- left: auto; 
text— indent: 2em; 
border: lpx solid # 903; 
Padding: 10px; 


} ss 一 
#text h2 { 

text- align: oenter; 
} 


任务 3 浏览 测试 。 
步骤 1 浏览 页 面 ,如 图 3-11 所 示 。 


百度 服务 内 容 


百度 网 络 服务 的 具体 内 容 由 百度 根据 实际 情况 提供 。 除非 本 服务 协议 另 有 其 他 明示 规定 ， 百 度 所 推出 的 新 产 
品 、 新 功能 、 新 服务 ， 均 受到 本 服务 协议 之 规范 。 为 使 用 本 服务 ， 您 必须 能 够 自行 经 有 法 律 资格 对 您 提供 互联 网 接 
入 服务 的 第 三 方 ， 进 入 国际 互联 网 ， 并 应 自行 支付 相关 服务 费用 。 此 外 ， 您 必须 自行 配备 及 负责 与 国际 联网 连 线 所 
需 之 一 切 必 要 装备 ， 包 括 计算 机 、 数 据 机 或 其 他 存 取 芍 置 . 


图 3-11 目录 导航 页 面 


步骤 2 单 击 “1. 服务 条 款 的 确认 和 接纳 ”导航 项 ,窗口 切换 到 导航 项 内 容 页 面 ,如 
图 3-12 所 示 。 


1. 服务 条 款 的 确认 和 接 负 


百度 消息 服务 所 有 权 及 经 营 权 为 百度 网 讯 科技 有 限 公司 (以 下 简称 "百度 公司 ") 所 有 。 用 户 在 自愿 开始 使 用 百 
认 消 息 服务 之 前 ， 必 须 仔细 赔 读 并 接受 本 服务 条 款 。 一 经 激活 百度 消息 服务 功能 ， 则 视 为 对 本 服务 全 部 条 球 的 认 知 
和 接受 。 


2. 服务 条 款 的 修改 


百度 公司 有 权 在 必要 时 修改 本 服务 条 款 ， 服 务 条 款 一 旦 发 生变 动 ， 将 会 在 相关 页 面 上 公布 修改 后 的 服务 条 款 。 
如 果 不 同意 所 改动 的 内 容 ， 用 户 应 主动 取消 百度 消息 服务 。 如 果 用 户 继续 使 用 百度 消息 服务 ， 则 视 为 接受 服务 条 款 
的 变动 。 


3. 用 户 的 账号 、 密 码 和 安全 性 


用 户 的 账号 、 密 码 为 用 户 在 百度 贴吧 首页 或 者 知道 首页 注册 的 账号 、 密 码 ， 用 户 应 受 善 保管 。 同时， 每 个 用 户 
部 要 对 其 消息 中 的 所 有 内 容 负 完 全 责任 。 用 户 可 自行 决定 更 摘 密 码 。 用 户 若 发 现 自己 的 账号 被 他 人 非法 使 用 或 存在 
安全 漏洞 的 情况 ， 应 立即 通知 百度 公司 。 百 度 茜 止 用 户 私下 有 偿 或 无 偿 转 计 账 导 ， 以 揭 因 账号 问题 产生 纠纷 ， 用 户 


图 3-12 导航 项 内 容 页 面 


步骤 3 单 击 “ 返 回 目录 ”链接 , 则 返回 到 如 图 3-11 所 示 的 目录 导航 页 面 。 
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3.3 ”利用 图 片 实现 超级 链接 
在 网 页 中 不 仅 可 以 利用 文字 实现 链接 的 效果 ,也 可 以 为 图 像 添 加 超 链接 ,这 样 就 可 以 满 
足 在 网 页 中 使 用 了 许多 图 片 的 网 页 的 设计 需要 。 
331 制作 图 片 水 平 栏 导航 


【知识 基础 】 


制作 图 片 水 平 栏 导 航 与 制作 文字 水 平 栏 导航 的 方法 基本 相同 ,其 实质 在 于 添加 链接 的 
对 象 由 文字 变 为 图 片 文件 ,但 是 添加 超 链接 的 方法 是 一 样 的 。 


【任务 实施 】 


案例 ”制作 图 片 水 平 栏 导航 。 

任务 1 搬入 DIV 标签 。 

步骤 1 新 建 网 页 文件 ,插入 div 标签 ,并 命名 为 nav。 

步骤 2 设置 通配符 (* ) 样 式 ,清除 所 有 标签 的 边 距 和 补 白 。 


margin: Opx; 
Padding: Opx; 
} 
步骤 3 添加 nav 样式 。 


任务 2 编辑 链接 项 。 
步骤 1 编辑 导航 图 片 项 ,并 添加 空 链 接 。 


<div id "nav"> 
<uUl> 
<li><ahref= 喷 "><img src= "images/01.jpg" 户 </a></li> 
<li><ahref=#"><img src= "images/02.jpg" /< /</l> 
<li><ahref="#">< img src= "images/03.jpg" /></a></li> 
<li><ahref="#"> <img src= "images/04.jpg" /></a></li> 
<li><ahref="# "> <img src= "images/05.jpg" /></a></1> 
<li><ahref="# "> <img src= "images/06.jpg" /></a></li> 
<li><ahref="#"><img src= "images/07.jpg" 人 ></a></li> 
</al> 
</div> 
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步骤 2 添加 列表 样式 ,使 列表 项 由 垂直 对 齐 变 为 水 平 对 齐 , 并 设置 列表 项 高 度 .宽度 等 。 


#navul { 
list— style- type: none; 

} 

#navul li{ 
text— align: oenter; 
float: left; 
height: 35px; 
width: 105px; 

} 

img { 
border: 0; 

} 


页 面 浏览 如 图 3-13 所 示 。 
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图 3-13 图 片 水 平 栏 导航 


332 制作 图 像 局 部 导航 


【知识 基础 】 
如 果 要 添加 超 链接 的 图 片 较 大 ,可 以 通过 设置 图 像 的 热 区 来 分 别 添加 超级 链接 。 图 像 


超级 链接 设置 , 当 浏 览 者 单 击 每 一 个 热点 时 ,网 页 将 跳 转 到 指定 的 链接 页 面 上 。 
现在 大 部 分 网 页 中 都 将 一 些 导航 信息 直接 设计 到 了 图 像 文 件 中 ,经 过 裁 切 后 ,直接 在 网 
页 中 使 用 ,那么 ,要 为 图 像 上 的 那些 导航 文字 设置 链接 就 必须 进行 热 区 的 定义 。 


1 创建 图 像 热 区 

选中 要 划分 热 区 的 图 像 后 ,就 可 以 在 “属性 ?面板 左下 方 看 到 一 些 用 于 创建 热 区 的 按钮 。 
矩形 热点 工具 : 在 图 像 上 拖 动 鼠标 指针 可 以 建立 一 个 矩形 选区 。 

椭圆 形 热 点 工具 : 在 图 像 上 拖 动 鼠标 指针 可 以 建立 一 个 椭圆 形 选区 。 

多 边 形 热点 工具 : 通过 连续 单 击 确定 顶点 的 方法 来 定义 一 个 不 规则 形状 的 热 区 。 

指针 热点 工具 : 用 于 选择 和 调整 图 像 热 点 , 按 “shift” 键 单 击 可 以 选择 多 个 热点 。 


2 编辑 和 调整 热 区 
编辑 : 单 击 要 编辑 的 热 区 , 按 住 鼠标 左 键 拖 动 即 可 将 其 进行 移动 。 
?工具 ,将 鼠标 指针 移动 到 要 调整 形状 的 热 区 顶点 处 , 变 为 黑色 箭 
头 时 , 按 住 鼠 标 左 键 拖 动 ,可 以 改变 热 区 的 形状 ,显示 蓝 色 框 线 , 达 到 所 需 形状 时 , 松 开 鼠 标 
左 键 , 完 热 区 形状 的 调整 。 

3 为 热 区 添加 链接 

鼠标 单 击 准备 添加 链接 的 图 像 热 区 ,在 “属性 ”面板 中 ,在 “链接 ” 栏 中 输入 链接 文件 的 


URL,“ 替 换 ” 栏 中 输入 替代 文本 ,设置 “目标 " 框 中 选择 链接 的 网 页 打开 窗口 。 
【任务 实施 】 


案例 ”制作 图 像 局 部 导航 。 

任务 1 插入 DIV 标签 。 

步骤 1 新 建 网 页 文件 ,插入 div 标签 ,并 命名 为 nav。 
步骤 2 添加 nav 样式 。 


#nav { 
Width: 700px; 
margin- right: auto; 
margin- left: auto; 
text- align: oenter; 
} 


任务 2 编辑 链接 项 。 
插入 导航 图 片 ,创建 图 像 热 区 ,为 热 区 添加 空 链接 。 


<div id "nav"> 
< img src= "images/map.jpg" usemap= # Map" border= "0" /> 
<map name= "Map" id- "Mep"> 
< area shape= "rect" coords= "29,15,158, 59" href= 啡 "alt= " 哦 要 留言 " /> 
< area shape= "rect" coords= "165,14,296,59" href- 只 "alt= 吐 看 留言 " /> 
< area shape= "rect" ooords= "303,15,433,59" hre 人 = 啡 " alt "留言 管理 " /> 


3-14 ”编辑 图 像 热 区 


任务 3 浏览 测试 
浏览 页 面 ,如 图 3-15 所 示 。 


DR | © | 8 Een | 


3-15 ”图像 局 部 导航 


3.4 关于 其 他 链接 


在 网 页 中 我 们 不 仅 可 以 利用 文字 、 图 像 实 现 超 链 接 , 还 有 如 邮件 链接 、 下 载 文 件 链接 、 
FTP 链接 等 链接 方式 ,多 种 链接 方式 就 可 以 满足 在 网 页 设计 中 的 需要 。 
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341 下 载 文 件 的 链接 
【知识 基础 】 


文件 下 载 对 每 个 用 户 来 说 并 不 陌生 。 当 用 户 单 击 下 载 链接 后 ,浏览 器 会 自动 判断 文件 
的 类 型 ,由 用 户 选择 下 载 文件 所 要 保存 的 路 径 即 可 下 载 该 文件 。 


【任务 实施 】 


案例 制作 下 载 文件 的 链接 。 

任务 1 插入 DIV 标签 。 

步骤 1 新 建 网 页 文件 ,插入 div 标签 ,并 命名 为 nav。 
步骤 2 添加 nav 样式 。 


#nav { 
width: 500px; 
Padding: 10px; 
border: lpx solid # 06C; 
font— size: 14px; 
color: # 999; 

} 


任务 2 编辑 div 内 容 。 
步骤 1 编辑 页 面 文 字 内 容 , 添 加 文件 下 载 链 接 。 
<div id "nav"> 
<h2> 歌 曲 : < sban class= "tp 小 苹果 < /sban> -筷子 兄弟 < /h2> 
<h3> 3.34 / 128kbps / mp3<c /h3> 
<a href- "mp3/akplemp3a"> 下 载 </a> 
</div> 


步骤 2 添加 歌曲 名 样式 。 


tpl 
font— size: 35px; 
font- weight: bold; 
color: #06C; 

} 


步骤 3 添加 下 载 链 接 样 式 。 


#nava { 
font- size: 15px; 
line~ height: 30px; 
font— weight: bold; 
background- color: # 06C; 
display: block; 
height: 30px; 


:ETM sony 
3) 
A Width: 100px; 
text— align: oanter; 
border- radius: Spx; 
} 
a:link { 
color: # FEF; 
text— decoration: none; 
a:hover { 
color: # 333; 
i 


任务 3 浏览 测试 。 
浏览 页 面 ,如 图 3-16 所 示 。 


了 歌曲: 小 芋 果 - 所 子 兄弟 


3.3M / 128kbps / mp3 


下 载 


图 3-16 下 载 文件 的 链接 


342 电子 邮件 链接 


【知识 基础 】 


网 页 中 电子 邮件 地 址 的 链接 ,可 以 使 网 页 浏览 者 将 有 关 信 息 以 电子 邮件 的 形式 发 送 给 
电子 邮件 的 接收 者 。 通 常情 况 下 ,接收 者 的 电子 邮件 地 址 位 于 网 页 页 面 的 底部 ,并 且 与 地 址 
标签 (二 address 二 ) 配 合 使 用 。 

创建 电子 邮件 格式 : 


<a href- "mailto:hanhanyu8@ cq.cam> 联 系 我 们 </a> 


【任务 实施 】 


案例 ”制作 电子 邮件 链接 。 

任务 1 插入 DIV 标签 。 

步骤 1 新 建 网 页 文件 ,插入 div 标签 ,并 命名 为 nav。 
步骤 2 添加 nav 样式 。 


#nav { 
width: 500px; 
Padding: 10px; 
border: lpx solid # F60; 
font— size: 14rx; 


任务 2 编辑 div 内 容 。 
步骤 1 编辑 页 面 文字 内 容 ,添加 邮件 链接 。 


<div id "nav"> 
<h3> 温 志 提 示 :<h3> 
<Ey 为 进一步 拓宽 院 长 与 分 院 各 科室 及 广大 师 生 员 工 的 沟通 渠道 ,加 快 信息 反馈 ,提高 工作 效率 ， 
及 时 了 解 .采纳 广 大 师 生 员工 对 分 院 发 展 建设 提出 的 意见 和 建议 ,解决 师 生 员工 学 习 、 工 作 、 生 活 
中 存在 的 问题 和 困难 ,提高 工作 效率 , 特 开通 院 长 信箱 服务 。< /p> 
<a href= "mailto:66666@ qq.com"> 院 长 信箱 < /a> 
<a href= "mailto:55555@ qq.com"> 书 记 信 箱 < /a> 

</div> 


步骤 2 设置 段落 p 标签 样式 。 


#navp { 
font— size: 13px; 
color: # 999; 
text— indent: 2em; 
1line height: 20px; 
} 


步骤 3 添加 下 载 链接 样式 。 


#nava { 
font- size: 15pxy 
1line_ height: 30px; 
font- weight: bold; 
background- color: # F60; 
display: inline- block; 
height: 30px; 
text- align: oenter; 
width: 120pxy 
margin- right: 20px; 


a:hover { 
Color: # 333; 
} 
任务 3 浏览 测试 。 


浏览 页 面 ,如 图 3-17 所 示 。 在 该 页 面 中 , 单 击 “ 院 长 信箱 ”或 “书记 信箱 ”, 则 会 自动 进入 
邮件 编辑 窗口 (在 用 户 计算 机 中 必须 安装 邮件 客户 端 ) ,在 该 窗口 中 自动 添加 了 收 件 人 的 邮 
箱 地 址 。 


1 Emo 


80 ， 


温馨 提示 : 


为 进一步 拓宽 院 长 与 分 院 各 科室 及 广大 师 生 员工 的 沟通 渠道 ， 加快 信息 反 饶 ， 捍 
高 工作 效 硅 ， 及 时 了 解 、 乘 纳 广 大 师 生 员工 对 分 院 发 展 建设 提出 的 意见 和 建议 ,解决 
师 生 员工 学 习 、 工 作 、 生 活 中 存在 的 问题 和 困难 ， 提高 工作 效 硅 ， 特 开通 院 长 信箱 
服务 


图 3-17 邮件 链接 


3.5 任务 拓展 


任务 1 制作 网 站 左 侧 垂直 导航 ,如 图 3-18 所 示 。 

任务 描述 : 垂直 导航 通常 置 于 网 站 的 左边 或 者 右边 的 一 
列 链接 。 垂 直 导 航 较 水 平 导 航 更 灵活 ,易于 向 下 扩展 , 且 允 
许 的 标签 长 度 较 长 。 垂 直 导 航 项 被 排列 在 一 个 单列 ,根据 从 
左 到 右 习 惯性 研究 ,左边 的 垂直 导航 栏 比 右边 的 垂直 导航 表 
现 要 好 。 | 

任务 要 求 : 不 借助 图 像素 材 ,只 用 列表 、 超 链接 、CSS 等 图 3.18 网 站 左 侧重 直 导航 
技术 完成 导航 制作 。 

任务 2 制作 网 站 分 页 导航 ,如 图 3-19 所 示 。 


上 五 | :| zs] sa] 贺 [s7 [ss "|[> 


图 3-19 网 站 分 页 导航 


任务 描述 : 分 页 导航 经 常 出 现在 搜索 页 中 ,一 次 可 展现 的 结果 数目 通常 有 限制 ,超出 限 
制 的 结果 将 在 新 页 面 展现 。 最 简单 的 分 页 导航 就 是 带 页 码 的 分 布 导 航 。 
任务 要 求 : 不 借助 图 像素 材 , 只 用 列表 、 超 链接 、CSS 等 技术 完成 导航 制作 。 


3.6 本 章 小 结 


本 章 通过 几 个 具体 的 案例 介绍 了 超 链 接 在 网 页 设计 中 的 重要 作用 ,尤其 是 在 网 站 导航 、 
邮件 链接 文件 链接 上 的 应 用 。 通 过 案例 操作 ,了 解 链接 路 径 , 掌 握 文字 链接 、 图 像 链接 、 文 
件 下 载 链接 和 邮件 链接 等 相关 知识 和 技术 ,具备 创建 网 站 链接 和 设计 导航 的 能 力 。 


习 题 


一 、 选 择 题 

(1) 以 下 创建 电子 邮件 链接 的 方法 ,哪个 是 正确 的 ? (  ) 
A. 二 a href 王 "xxx@126. com" 过 联系 我 们 二 /a> 
B. 二 mail href 一 "xxx@126. com" 二 联系 我 们 二 /mail 二 


点 。 


C. 二 a href 二 "email: xxx@126. com" 二 联系 我 们 二 /a 二 
D. 二 a href 一 "mailto:xxx@126. com" 二 联系 我 们 二 /a 二 
(2) 下 列 的 HTML 语句 中 ,哪个 是 正确 的 链接 语句 ? ( ) 
A. =a url="http://www. sina. com. cn" >sina. com. cn</a> 
B. =a href="http://www. sina. com. cn" >sina. com. cn</a> 
C. 二 a 二 http://www. sina. com. cn =/a> 
D. =a name="http://www. sina. com.cn">sina. com. cn</a> 


(3) 下 列 哪 一 个 选项 是 在 新 窗口 中 打开 网 页 ? (  ) 


A. _new B. _up C. _blank D. _self 
(4) 创建 一 个 位 于 文档 内 部 位 置 的 链接 的 代码 是 ( js 
A. =a href="#name"></a> B. =a name="name"><=/a> 


C. =~a href="mailto:23@qq. com"></a> D. <a href="URL"></a> 
(5) 下 列 哪个 标签 用 于 完成 超级 链接 ? (。 ) 


A. <link>...=</link> Bl a > 
C. <href>...=</href> DD; <ol> < /ol> 
(6) 当 链 接 指 向 下 列 ( ) 文 件 时 ,不 打开 该 文件 ,而 是 提供 该 文件 的 下 载 。 
A. HTML B; ZIP C. ASP. NET DFTP 
二 、 判断 题 


(1) HTML 代码 二 a name 二 "name" 达 /a 请 表 示 创 建 一 个 指向 位 于 文档 外 部 的 链接 
( ) 

(2) 书签 链接 必须 在 同一 页 面 内 进行 链接 。( > 

(3) http://www. sina. com. cn/index. html 是 相对 路 径 。( ) 

(4) 二 a 二 标签 的 target 属性 的 值 为 _self 时 ,表示 在 上 一 级 窗口 中 打开 浏览 器 。( ) 


三 、 设 计 题 
(1) 制作 如 图 3-20 所 示 的 校园 网 站 水 平 栏 导航 。 


首 页 女 院 概况 SN 学 生活 动 玛 资 队 硬 课程 建设 职 教 联盟 校 主 联盟 
图 3-20 校园 网 站 水 平 栏 导 航 


(2) 制作 如 图 3-21 所 示 的 校园 网 右 侧 快捷 垂直 导航 。 


图 3-21 校园 网 右 侧 快捷 垂直 导航 


网 页 栏目 设计 % 


网 页 栏目 是 构成 网 页 主体 内 容 的 重要 组 成 部 分 。 通 过 合理 的 网 页 分 栏 ,能 够 清晰 、 明 确 
地 表达 网 站 重点 要 展示 的 功能 、 主 旨 , 使 网 页 结构 排列 有 序 ,方便 浏览 者 更 清楚 地 知道 网 站 
所 要 传达 的 重点 信息 ,并 且 能 快速 找到 所 需 内 容 , 网 页 栏目 规划 的 水 准 ,直接 影响 着 网 站 的 
成 败 。 
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本 章 要 点 
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型 式 栏目 设计 、TAB 式 栏目 设计 、 视 频 栏 目 设计 、 滚 动 式 


4.1 关于 网 页 栏目 


【知识 基础 】 


成 功 建立 一 个 网 站 ,最 重要 的 是 做 好 详细 的 规划 ,一 般 网 站 规划 所 花费 的 时 间 要 占 整个 
网 站 开发 总 时 间 的 一 半 左 右 。 如 果 在 规划 不 清晰 的 情况 下 就 开始 网 站 的 开发 ,由 于 网 站 结 
构 不 清晰 ,目录 庞杂 ,内 容重 点 不 明确 , 较 轻 的 情况 会 出 现 页 面 组 织 的 乱七八糟 ,浏览 的 人 看 
得 糊涂 ;严重 的 情况 会 导致 整个 网 站 开发 过 程 停止 ,重新 对 整个 网 站 进行 再 次 规划 ,相当 于 
重新 开发 一 个 网 站 ,损失 惨重 。 


411 网 站 栏目 的 含义 


网 站 的 栏目 实质 上 就 是 整个 网 站 的 索引 或 目录 ,就 像 字典 中 的 字母 表 , 起 到 了 对 网 站 所 
有 内 容 有 序 排列 的 作用 ,可 以 让 浏览 者 快速 找到 所 需 的 内 容 。 合 理 的 网 站 栏目 结构 有 利于 
通过 主页 到 达 任何 各 级 栏目 页 面 ; 有 利于 通过 任何 一 个 网 页 可 以 返回 上 一 级 栏目 页 面 并 逐 
级 返回 主页 ;有 利于 明确 主 栏目 及 全 站 统一 。 


412 网 站 栏目 的 策划 


相对 于 网 站 页 面 及 功能 规划 ,网 站 栏目 规划 的 重要 性 常 被 忽略 。 其 实 , 网 站 栏目 规划 对 
于 网 站 的 成 败 有 着 非常 直接 的 关系 ,网 站 栏目 兼 具 以 下 两 个 功能 ,二 者 不 可 或 缺 。 
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1 提纲 者 领 ,点题 明 义 

网 速 越 来 越 快 ,网 络 的 信息 越 来 越 丰富 ,要 让 浏览 者 停 下 匆匆 的 脚步 ,就 要 清晰 地 给 出 
网 站 内 容 的 “提纲 ”, 也 就 是 网 站 的 栏目 。 

网 站 栏目 的 规划 ,其 实 也 是 对 网 站 内 容 的 高 度 提炼 。 不 管 网 站 的 内 容 有 多 精彩 ,如 果 缺 
乏 准 确 的 栏目 提炼 ,就 难以 引起 浏览 者 的 关注 。 因 此 ,网 站 的 栏目 规划 首先 要 做 到 “提纲 殷 
领 点 题 明 义 ”, 用 最 简练 的 语言 提炼 出 网 站 中 每 一 个 部 分 的 内 容 ,清晰 地 告诉 浏览 者 网 站 在 
说 什么 ,有 哪些 信息 和 功能 。 


2 指引 迷途 ,清晰 导航 

网 站 的 内 容 越 多 ,浏览 者 也 越 容易 迷失 。 除 了 “提纲 ”的 作用 之 外 ,网 站 栏目 还 应 该 为 浏 
览 者 提供 清晰 直观 的 指引 ,帮助 浏览 者 方便 地 到 达 网 站 的 所 有 页 面 。 

网 站 栏目 的 导航 作用 ,通常 包括 以 下 四 种 情况 。 

(1) 全 局 导航 

全 局 导航 可 以 帮助 用 户 随时 跳 转 到 网 站 的 任何 一 个 栏目 ,并 可 以 轻松 跳 转 到 另 一 个 栏 
目 。 通 常 来 说 ,全 局 导航 的 位 置 是 固定 的 ,以 减少 浏览 者 查找 的 时 间 。 

(2) 路 径 导航 

路 径 导航 显示 了 用 户 浏览 页 面 的 所 属 栏目 及 路 径 ,帮助 用 户 访问 该 页 面 的 上 下 级 栏目 ， 
从 而 更 完整 地 了 解 网 站 信息 。 

(3) 快捷 导航 

对 于 网 站 的 老 用 户 而 言 ,需要 快捷 地 到 达 所 需 栏目 ,快捷 导航 为 这 些 用 户 提 供 直 观 的 栏 
目 链接 ,减少 用 户 的 点 击 次 数 和 时 间 ,提升 浏览 效率 。 

(4) 相关 导航 

为 了 增加 用 户 的 停留 时 间 , 网 站 策划 者 需要 充分 考虑 浏览 者 的 需求 ,为 页 面 设 置 相关 
导航 ,让 浏览 者 可 以 方便 地 跳 转 到 所 关注 的 相关 页 面 ,从 而 增进 对 企业 的 了 解 ,提升 合作 
概率 。 

成 功 的 栏目 规划 ,是 基于 对 用 户 需 求 的 理解 。 对 用 户 的 需求 理解 得 越 准 确 、 越 深入 ,网 
站 的 栏目 也 就 越 具 吸引 力 ,能 够 留 住 越 多 的 潜在 客户 。 


4.2 常用 栏目 设计 


栏目 的 设计 制作 一 般 要 从 三 个 方面 人手: 一 是 内 容 , 要 紧 扣 主题 ;二 是 位 置 ,因为 左上 
角 是 浏览 者 视野 的 焦点 ,要 放置 最 重要 的 栏目 ,页 面 所 有 栏目 排列 要 从 上 而 下 ,从 左 到 右 ,分 
清 主 次 ;三 是 形状 ,栏目 的 形状 要 与 网 站 整体 风格 相 一 致 ,做 到 和 谐 统一 。 


421 制作 简易 式 栏 目 


【知识 基础 】 


简单 栏目 一 般 由 栏目 标题 ,栏目 内 容 组 成 ,栏目 标题 与 内 容 在 背景 色 与 区 域 界限 有 较 明 
显 区 别 。 


sy 


84 


【任务 实施 】 
案例 1 制作 如 图 4-1 所 示 样 式 的 简易 栏目 1。 
任务 1 在 Mui 文档 中 添加 DIV 结构 。 简易 栏目 1 - Windows Internet Expl.-- 世上 回 | 必 | 
步骤 1 鼠标 定位 在 HTML 文档 的 <body 二 SO” Bruin 国 [’[x| [PE-T, 
二 /body 二 标签 之 间 。 文件 如 ”编辑 是 查看 收 若 天 由 工具 CD) 帮助) 
步骤 2 添加 div 标签 内 容 如 下 所 示 。 2 BE! 
<div id- "jjjc"> 
<div id "bt> 2010 年 前 三 季度 光伏 发 电 
* 2010 年 10 月 成 品 油 运行 简况 ……- 
经 济 监测 .2010 年 10 朋 天然 气 运行 简况 
<div id- "98> 更 多 >> grbep; </div> ，2010 年 10 月 份 70 个 大 中 城市 住宅 .… 
pe “国家 石油 储备 一 期 工程 建成 投 用 .… 
，10 月 我 省 CPI 同 比 上 涨 12% 环 比 .. 
<ul> * 2010 年 10 月 全 国电 力 安全 生产 情况 
<1li><a href= 哇 ">2010 年 前 三 季度 光伏 
发 电 …… </az</li> 时 我 的 电脑 
<1li><ahre 全 啡 性 2010 年 10 月 成 品 油 运 图 4-1 简易 栏目 1 


<1li><ahref- 嘎 改 2010 年 10 月 天 然 气 运 行 简况 ……< /a>< /li> 

<li><ahre 伍 哇 ">2010 年 0 月份 70 个 大 中 城市 住宅 …*…< /a>< /li> 
<1li><ahre 伍 嘲 吃 国家 石油 储备 一 期 工程 建成 投 用 ……< /a>< /1i> 
<li><ahref= 叶 ">10 月 我 省 cEI 同 比 上 涨 1.23% 环 比 … 
<1li><a href= 叶 ">2010 年 10 月 全 国电 力 安全 生产 情况 …*…< /a>< /li> 


</al> 


</div> 


步骤 3 


任务 2 


在 设计 窗口 中 显示 内 容 如 图 4-2 所 示 。 


DW 国 ” dr Bh | it » ena 
文件 )” 纺 柱 ”查看 (J 报信 (0) 个 疏 (如 ”格式 (0) 命 信 (C) 站 点 @) 窗 
jianyilsl, htalz X PF: \lanm\ Jianyilal. RE 


图 4-2 添加 CSS 样式 表 前 简易 栏目 1 效果 


为 DIV 结构 创建 CSS 样式 。 


步骤 1 确定 添加 CSS 的 位 置 。 


2 


步骤 2 在 HTML 文档 的 二 head 二 标签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 


具体 操作 方法 如 下 所 示 。 


< style type= "text/css"> 
#jjjc { 
height: 210px; 
width: 330px; 
border: lpx solid # 1E67FO; 
font— size: 13x; 
line- height: 22px;} 
#jjjcul { 
margin left:- Spx; 
margin- top: Sex7} 
#jjjcu liaf 
color: #000; 
text— decoration: none;} 
#jjjc #bt { 
background- image: url (images/fgw index 04.jpg); 
background- repeat: no- repeat; 
height: 29px; 
width: 330px; 
olor: #FFF; 
text- indent: lem; 
Paddingr top: 3px7 
font— size: 14px7 
font- weight: bold;} 
#jjjc #bt #9gd { 
font— size: 12px; 
color: #000; 
text- align: right; 
margin top: — 23px; 
font- weight: bold;} 
</style> 
步骤 3 测试 在 浏览 器 中 显示 效果 。 
案例 2 制作 如 图 4-3 所 示 样 式 的 简易 栏目 2。 
任务 1 在 HTML 文档 中 添加 DIV 结构 。 
步骤 1 
步骤 2 添加 div 标签 内 容 如 下 所 示 。 
<divig- "jyjl> 
<div id "bt"> 
经 验 交流 
<div id "gd> 更 多 >> grbsp; < /div> 


简易 栏目 2 - Windows In..- 攻 
文件 四 ”编辑 于 ) 查看 中 收 关 次) 工 ” 
益 收 藏 天 | 项 简易 栏目 2 


* 河北 省 保定 市 行政 服务 大 厅 -…- 
* 宁波 行政 审批 制度 改革 率先 

* 从 审批 到 服务 一 一 沈阳 课 化 

* 济南 启动 行政 审批 制度 改革 

* 国家 石油 储备 一 期 工程 建成 

* 山东 改革 行政 审批 制度 原则 
* 济南 全 面 改革 行政 审批 制度 - 

* 海南 行政 审批 制度 实行 "三 


4-3 简易 栏目 2 


鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标签 之 间 。 


1 Es 


</div> 

<Ul> 

<li><a hre 人 = 哇 吃 河北 省 保定 市 行政 服务 大 厅 

<1i><a href= 哇 吃 宁 波 行政 审批 制度 改革 率先 …… 

<1li><ahre 全 啡 必 从 审批 到 服务 一 一 沈阳 深化 …… 

<li><ahre 全 只 济 南 启动 行政 审批 制度 改革 …… 

<li><ahre 伍 哇 心 国家 石油 储备 一 期 工程 建成 

<li><ahre 伍 哇 吃 山东 改革 行政 审批 制度 原则 

<li><a hre 伍 吃 济南 全 面 改革 行政 审批 制度 …… 

<1i><a href= 哇 吃 海 南 行政 审批 制度 实行 "三 

< 吕 al> 

</div> 

步骤 3 在 设计 窗口 中 显示 内 容 如 图 4-4 
所 示 。 

任务 2 为 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 一 head 之 标签 对 
之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ,具体 
操作 方法 如 下 所 示 。 


< style type= "text/css"> 
#jyjl { 
beckopourd imege:ur] (imeges/jyjl .jpg); 
background- repeat: no- repeat; 
height: 223rx; 
width: 220px; 
font— size: 12px; 
1line height: 22pxy 
border- top- style: none; 
border- right- style: none; 
border- bottam- style: none; 
border- left- style: none;} 
#jyjlul { 
margin- left:— llpx; 
margin- top: Sex;} 
#jyjlul liaft 
color: # 000; 
text- decoration: none;} 
#jyjl #bt { 
height:29%px; 
Color: #FFF; 


图 4-4 添加 CSS 样式 表 前 简易 栏目 2 效果 


text- indent: lem; 
Faddingr top: x; 
font- size: 14px; 


4 
font— weight: bold;} 
#jyjl #bt #9gd { 
font- size: 12px; 
color: # 000; 
text- align: right; 
margin top: — 23px; 
font— weight: bolg;} 
< /style> 
任务 3 测试 在 浏览 器 中 显示 效果 。 
422 制作 典型 式 栏目 
【知识 基础 】 


典型 栏目 与 简易 栏目 一 样 ,一 般 也 是 由 栏目 标题 ,栏目 内 容 组 成 ,这 里 列举 两 个 常见 的 
栏目 案例 。 


【任务 实施 】 
案例 1 制作 如 图 4-5 所 示 样式 的 典型 栏目 1。 


ES 了 HT 


[2009.07-20] 


我 校 将 承办 “振兴 老 工业 基地 ” 广 [2009-06-15] 
用 我 校 学 生 将 参加 市 微机 技能 大 守 [2oo9.06-10] 
省 教委 领导 专程 未 我 校 参 现 考 察 Boop os. 
教务 科 召 开办 公 室 主任 工作 座谈 [2o09.0407] 


4-5 典型 栏目 1 


任务 1 在 HTML 文档 中 添加 DIV 结构 。 
步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标签 之 间 。 
步骤 2 添加 div 标签 内 容 如 下 所 示 。 


<div id "on"> 
<div id "bt"> < /div> 
<div id "text™> 
<div id- "tupian"> < img src= ".Vimages/index 14.gif" widthr "212" height— 
"193" />< /div> 


‘ TMT HM Csriaey 


<ul> 
<li><ahre 人 = 哇 吃 学 校 举 办 联谊 学 校 夏令 营 活 动 gnbsp; gnbsp; snbsp; snbsp; sribsp; gribsp; Sribsp; 
Erbep; Eribsp; anbsp; énbsp; Snbsp; snbsp; anbsp; anbsp; Srbep; Sribep; grbep; Srbep; Srbep; Sbep; Srbep; Srbep; 
Sribsp; gribep; Sribep; [2009- 07- 20]< /a> < /li> < img src= "./images/index 19.gif" width= "340" height=" 
a 
<li><a href= 啡 吃 我 校 将 承办 “振兴 老 工 业 基地 ” 广 sribsp; snbsp; snbsp; snibsp; gnbsp; gnbsp; gnbsp; 
sribsp; nbsp; gnbep; Sribsp; Sribsp; &ribsp; nibsp; énibap; Snibsp; Enbsp; gnbsp; nbsp; Sribsp; [2009- 06- 15] < /a 
></1> 
< img sro= "./images/index 19.gif" width= "340" height= "7" /> 
<1li><a hre 伍 嘲 吃 我 校 学 生 将 参加 市 微机 技能 大 赛 sribsp; snbsp; snbsp; sribsp; gnbsp; sribsp; sribsp; 
Snbsp; Enibep; énbsp; grbsp; grbsp; énbsp; snbsp; Snbsp; Snbsp; snbsp; Snbsp; anbsp; Snbsp; anbsp; rbep; Snbepy 
Srbep; [2009- 06- 10]< /> 
</1l> 
< img src= "./images/index 19.gif" width= "340" height= "7" /> 
<1li><ahre 全 嘎 必 省 教委 领导 专程 来 我 校 参 观 考察 snbsp; snbsp; srbsp; gnbsp; sribsp; gnbsp; eribsp; 
&nbsp;&nbsp;&nbsp; snbsp; snbsp; Snbsp; Snbsp; snbsp; énbsp; Snbsp; Snbep; Srbep; Sribsp; Snbsp; Sribep; Snbepy 
Srbep; [2009- 05- 12]</a>< /1i> 
< img sro= "./images/index 19.gif" width= "340" height= "7" /> 
<li><a hre 伍 哇 吃 教务 科 召 开办 公 室 主任 工作 座谈 snbsp; snbsp; sribsp; snbsp; snbsp; gnbsp; &ribsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; snbsp; snbsp; &nbsp; Snbsp; snbsp; snbsp; &nbsp; anbspy &nbsp; Snbspy snbepy 
Srbep; [2009- 04- O71< />< /1i> 
< img src= "./images/index 19.gif" width= "340" height= "7" /> 
<l></1> 
</ul> 
</div> 
</div> 


步骤 3 在 设计 窗口 中 显示 内 容 如 图 4-6 所 示 。 

任务 2 为 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 王 head 标签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
具体 操作 方法 如 下 所 示 。 


< style type= "text/css"> 
#con #bt { 
background- image: url (./images/index 12.gif); 
background- repeat: no- repeat; 
height: 25px; 
width: 555px;} 
# con # text # tupian { 
float: left; 
height: 172px; 
width: 212px;} 
#con { 


height: 200px; 


Dw | 次 惕 ” [所 区 司 


文件 四 “编辑 四。 查看 () ”其 入 四。 修改 辐 格 式 (命令 CO 站 点 G) 窗口) 帮助 ID 


dianxingiml,html? x 
到 | 拆 分 | 襄 | 实时 代码 | 所 多 。_ 实 时 视 目 | 检查 | @) 局。 标题 并 EL 


Tc © OW i | 国 


* 学 校 举办 联 这 学 校 夏令 营 活 动 [2009-07-201 
* 我 校 将 承办 -振兴 老 工业 基地 " 广 [2009-06-15] 
| ， 省 教委 2009-05-12 
| * 教务 科 召 开办 公 室 主 任 工作 座谈 [2009-04-07] 


[hody> Clivecon) Cdivatext> Cl> [NO Q lo0x ~ Bey x av 7 R73 ricode CTE-6) 


图 4-6 添加 CSS 样式 表 前 典型 栏目 1 效 时 ET IISIRTTTTTTCT LSIOlxi 


width: 555px;} 
#on#text ul { 

font- size: 13x; 

list- style- type: none; 

margin- left:25px;} 
#om#text ul li af 

color: #000; 

text— decoration: none; } 新 生 仪 例 

< /style> 愉 表 演 

任务 3 测试 在 浏览 器 中 显示 效果 。 

案例 2 制作 如 图 4-7 所 示 样 式 的 典型 栏目 2。 

任务 1 在 HTML 文档 中 添加 DIV 结构 。 

步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 
标签 之 间 。 

步骤 2 添加 div 标签 内 容 如 下 所 示 。 


<div id "con"> 

< div jd "bt"> < ing arc "./images/index 68.gif' widthr "211" height= "25" />< /div> 

<div class= "text"> 
< div id- "mlul"> < img src= "./images/index 71.gif" width= "74" height— 
"93" />< /div> 
< div class= "img"> < img src= "./images/index 73.gif" width= "124" height— 
"91" />< /div> 

</div> 


人 与 制作 一 HIML+CSStiQey 


<div class= "clear>< /div> 
<div classr "text"> 
<div jd "mlu2> < img sro= "Vimages/index 94.gif" widthr "74" height— 
"96" />< /div> 
< div class= "img"> < img src= "./imeges/index 93.gif" width= "122" height= 
"98" />< /div> 
</div> 
<div class= "clear"> < /div> 
<div class= "text"> 
< div id "mlu3"> < img sro= ".Vimages/index 113.gif" width= "74" height= 
"102" />< /div> 
< div class= "img"> < img src= ".Vimages/index 117.gif" width= "121" height= 
"01" />< /div> 
</div> 
< /div> 
步骤 3 在 设计 窗口 中 显示 内 容 如 图 4-8 所 示 。 
任务 2 为 DIV 结构 创建 CSS 样式 。 
步骤 1 确定 添加 CSS 的 位 置 。 
步骤 2 在 HTML 文档 的 一 head 之 标签 对 
之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ,有 具 
体操 作 方法 如 下 所 示 。 


< style type= "text/css"> 


#oon { 
width: 212px; 
border: lpx solid # 999;} 
#con .clear { 
clear: none;} ! 
#oon .text #mul { | tt 
float: left;} 
“img { 
float: right;} 
#oon .text { 
height: 10lpx; 
width: 212px;} 图 4-8 添加 CSS 样式 表 前 典型 栏目 2 效果 
#0oon .text #mlu2 { 
float: left;} 


#00n .text #mlu3 { 
float: left;} 
< /style> 


任务 3 测试 在 浏览 器 中 显示 效果 。 


4.3 TAB 式 栏目 设计 


【知识 基础 】 


TAB 式 栏目 是 目前 网 站 建设 中 最 常见 的 一 种 交互 方式 ,其 显示 效果 是 可 以 将 不 同 的 内 
容重 倒 放 管 在 某 一 区 域 块 内 ,同时 用 户 可 通过 鼠标 点 击 或 移动 等 操作 方法 对 该 区 域 进行 触 
发 ,每 次 只 显示 重 倒 内 容 区 中 的 一 层 内 容 , 它 充分 体现 了 当前 关于 Web 界面 的 设计 趋势 , 即 
缩短 页 面 屏 长 ,降低 信息 的 显示 密度 ,又 要 保证 可 视 信 息 的 大 容量 。 


【任务 实施 】 
案例 制作 如 图 4-9 所 示 样式 的 TAB 式 栏目 。 


TAB 式 栏目 - Windows Internet Explorer 此] 后] 区 | 


SO Bruwewae Bs |[x| PT, 证 


| 文件 四 编辑 EE) 查看 WD 收藏 天 &) 工具 CD) 必 助 0D 
这 收藏 | 古 TN 坏 桥 目 男 


政府 公文 | 新 闻 发 布 | 线 计 分 析 | 公共 财政 
* 行政 执法 基本 规范 ( 试行 
= 行政 立法 基本 规范 ( 试行 ) 
政府 办 公 厅 关于 表彰 人 民 建议 奖 - 
* 关于 印发 辽 青 市 人 民政 府 机 构 英 … 
， 关 于 印发 辽 青 市 关 停 并 转 落后 钢 .… 
* 关于 修改 《过 青 市 燃 煤 二 氧化 硫 


EEETT 


图 4-9 TAB 式 栏目 


任务 1 在 HTML 文档 中 添加 DIV 结构 。 
步骤 1 鼠标 定位 在 HTML 文档 的 一 body 之 一/body 二 标签 之 间 。 
步骤 2 添加 div 标签 内 容 如 下 所 示 。 


<div id "cde> 
<div> 
<div id "zfgw"> <a href- "zfgw.html" target= "zf" anclice= "MM rbGroap (‘dn', 
"groupl' "image0142", ' ./images/image0l 1 42.jpg',l)" omouseover= "MM nbGroup ('over', "image0142 7 
', "Imagel','', '',1)" cnmpusecut= "MM rnbGroup ('out')"> < img src= ".Vimages/image01 1 42.jpg" name=" 
image0142" width= "85" height= "25" border= "0" id= "image0142" onload= "MM nbGroup ('init', 'groupl', 
"image0142', ' ./images/image0l 42.jpg',D)" />< /a> < /div> 
< div id- "xwfb"> < a href= "xwfb.html" target= "zf" cnclick= "MM _rbGroup ('down', 'groupl', 'image0145',' 
images/image0l 1 45.jpg",1)" onmpuseover= "MM nbGroup ('over', 'image0145 
TbGroup ('out') "> < img src= ".Vimages/image01 45.jpg" name= "image0145" width= "85" height= "25" border 
="0" id "image0145" />< /a>< /div> 
<div id "tjfx"> <a href= "tjfx.html" target= "zf" cnclick= "MM rbGrop ('don', 'groupl', "image0146… 
jimages/image01 1 46.jpg"',1)" onmpuseover= "MM nbGroup ('over', 'image0146','','',1)" cnmpusecut= "MM 
TbGroup ('out') "> < img src= "./images/image0l 46.jpg" name= "image0146" width= "85" height= "25" border 


"1)" ampusecut= "MM 


="0" id "image0146" />< /a>< /div> 
< div id "ggcz"> <a href= "ggcz.html" target= "zf" cnclick= "MA rbGroup ('dom', "groupl', "image0147',' 
images/image01 1 47.jpg',1)" cnmpuseover= "MM nbGroup ('over', 'image0147','','"',1)" onmouseout= "MM 
TbGroup ('out') "> < img src= ".Vimages/image01 47.jpg" name= "image0147" width= "87" height= "25" border 
="0" id "image0147" />< /a>< /div> 
</div> 
<div> 
<div class= "bianklr"> < iframe src= "zfgw.html" name= "zf" width= "340" marginwidth= "0" height= "120" 
marginheight= "0" align= "left" scrolling= "No" frameborder= "0" id "zf"> < /iframe> < /div> 
</div> 
<div> 
<div> < ing src= "./images/image0l 621.jpg" width= "342" height= "13" />< /div> 
</div> 

</div> 


步骤 3 在 设计 窗口 中 显示 内 容 如 图 4-10 所 示 。 


4-10 添加 CSS 样式 表 前 TAB 式 栏目 效果 


任务 2 为 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 二 head 二 标签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
有 具体 操作 方法 如 下 所 示 。 


< style type= "text/css"> 

x*{ 

pedding: 0p; 

margin:Opx; 

border:Opx; } 

#2 { 
width: 342px; 
margin- left:10px; 
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margin- top:10px;} 

# 2k div # zfgw { 
float: left;} 

-bianklr { 
border- right— width: lpx; 
border- left— width: lpx; 
border- top- style: none; 
border- right- style: solid; 
border- bottam- style: none; 
border- left- style: solid; 
border- right- color: # CECECE; 
border- left- color: # CECECE; 
height:145px; } 

#20k div # xwfb { 
float: left;} 

#70xk div # tjfx { 
float: left;} 

#0xk div # ggcz { 
float: left;} 

< /style> 


任务 3 测试 在 浏览 器 中 显示 效果 。 
4.4 视频 栏目 设计 


【知识 基础 】 


视频 效果 具有 信息 丰富 ,传达 便捷 、 易 于 理解 的 特点 ,对 浏览 者 的 文化 水 平 要 求 不 高 , 同 
时 形象 生动 ,具有 较 强 的 吸引 力 。 因 此 视频 和 音频 功能 在 网 页 中 出 现 的 频率 呈 上 升 的 趋势 。 

视频 在 网 页 上 常见 格式 : avi、rm 等 。 但 实际 上 却 存 在 着 浏览 兼容 性 问题 ,在 实际 网 站 
开发 中 我 们 发 现 视 音 频 格式 转化 为 swf 格式 是 一 个 好 用 的 技巧 。 

由 于 网 络 宽带 的 限制 ,在 使 用 多 媒体 的 形式 表现 网 页 的 内 容 时 不 得 不 考虑 客户 端的 传 
输 速 度 , 因 此 在 页 面 中 不 要 置信 过 于 庞大 的 文件 ,也 不 要 加 入 过 多 的 媒体 文件 而 给 浏览 者 造 
成 观看 页 面 时 的 麻烦 。 


【任务 实施 】 


案例 ”制作 如 图 4-11 所 示 样 式 的 视频 栏目 。 

任务 1 在 HTML 文档 中 添加 DIV 结构 。 

步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标签 之 间 。 
步骤 2 添加 div 标签 内 容 如 下 所 示 。 

<div id "shp"> 

<div id "bt > 


‘ THM CSHjoaey 


/ 视频 栏目 - Windows Internet Explorer [~ 


WEN [去 一 一 
DFO” 四 Fair 过 图 | 乡 ||x 


文件 四 “编辑 四 查看 四 收 基 天 风 工具 上 条 二 0 
遍 收 若 天 | 外 视频 实 目 


*PHP " 视频 更 多 > 
(第 五 讲 ) PHP 循 环 语 句 的 介绍 与 应 用 


本 衬 大 
1，break n 亲 直 控制 褒 名 


2. do.…while 舌 环 语句 
3,for 循环 语句 


本 记忆 .请 避 民 
EAM wow pnp 90 com 


图 4-11 视频 栏目 


<div id- "phpshp"> grbsp; PHP* 视频 < /div> 
<div id= "gd"> 更 多 sgt;sgt; gnbsp; < /div> 
< /div> 
< div id "php"> < erbed src= "images/PHP100- 5.wmv" width= "340" height= "280"> 
< /enbed> < /div> 
< /div> 


步骤 3 在 设计 窗口 中 显示 内 容 如 图 4-12 所 示 。 

任务 2 为 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 天 head> 标 签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
具体 操作 方法 如 下 所 示 。 


< style type= "text/css"> 
#shp { 
height: 315px; 
width: 340px; 
border: lpx solid # EDEE487} 
# shp #bt # Ehpshp{ 
float: left; 
width:280px; 
height:29px; 
Faddingr top:10pz; 
font- fomily: 呆 体 "; 
font- weight:bold; 
font- size:l4pxz] 
#5bp #bt #9 { 


height:35pxy 
background image: url (images/shipinbeijing.jpg)， 
background- repeat: no- repeat;} 

< /style> 


任务 3 测试 在 浏览 器 中 显示 效果 。 


4.5 滚动 式 栏目 设计 


【知识 基础 】 


滚动 式 栏目 可 以 使 网 页 变 得 活泼 ,富有 动感 。 根 据 滚动 方向 的 不 同 , 滚 动 式 栏目 可 以 划 
分 为 左右 滚动 式 栏目 和 上 下 滚动 式 栏目 。 


制作 左右 滚动 式 栏目 
左右 滚动 式 栏目 即 网 页 元 素 滚动 的 方向 为 水 平 ,可 以 从 左 向 右 滚动 ,也 可 以 从 右 向 左 


1 人 ECcsjaey 
滚动 。 
【任务 实施 】 
案例 1 制作 如 图 4-13 所 示 样 式 的 左右 滚动 式 栏目 。 


记 左右 滚动 栏目 1 一 Windows Internet Ezplorer 


CRRN [下 二 二 一 [下 
HO” rutiles\yedl hin: 过 图 | 全 | | ET, 语 


文件 人 ) 编辑 EF) 查看) 收 寄 严 &) 工具 GD) 帮助 0D 
袜 收藏 天 | 熙 左右 漆 动 栏目 1 


图 4-13 左右 滚动 式 栏目 


任务 1 在 HTML 文档 中 添加 DIV 结构 。 
步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标签 之 间 。 
步骤 2 添加 div 标签 内 容 如 下 所 示 。 


<div id "con"> 

<div ij 中 "bt"> 花 卉 欣赏 < /div> 
<div id "gd> 

< marquee width= 630 height= 120 scrollamount= "2" scrollgelay= "40" jd- 

"s" onmcuseover= "s.stop()" ompuseout= "s.start ()"> 

< IMS height= 100 sro= "./images/1.jpg" widthr 160> < TMG height= 100 src= "./images/2.jpg" width= 

150> < TMG height= 100 src="./images/3. jpg" width= 150> < IMS height= 100 src="./images/4. jpg" 

width= 150> 


步 又 3 在 设计 窗口 中 显示 内 容 如 图 4-14 所 示 。 

任务 2 为 DIV 结构 创建 CSS 样式 。 

步骤 1 确定 添加 CSS 的 位 置 。 

步骤 2 在 HTML 文档 的 二 head 二 标签 对 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
具体 操作 方法 如 下 所 示 。 


< style typer "text/css"> 
#oon { 
width:630px; 
height:147px; 
background- color:# FEC; 
border: lpx solid # 900;} 


DW 国 ” 立 ” 吕 - 

文件 () ”编辑 (查看 (WD 插入 (D 修改 轩 格式 0) 命令 (C) 站 点 (3) 窗口 四 帮助 0D 
ea tle x 

| ji 折 分 | 设 i ] 时 代 罗 J 避暑 视图 起 可 | 芭 . DC 村 二 EI 

ee///? I/ fles/ eal hi 


bodv> RiIQ 00x 663 x iriv 42 Kk /6 WD Wnicods (MF-8) 


图 4-14 添加 CSS 样式 表 前 左右 滚动 式 栏目 效果 


#con #bt { 
font— size: 14px; 
font- weight: bold; 
Color: #FFF; 
background- color: # 900; 
height: 22px; 
Paddingr top: px; 
padding- left:10px;} 
#oon#gd { 
Paddingr top:10px;} 
< /style> 


任务 3 测试 在 浏览 器 中 显示 效果 。 
案例 2 制作 左右 连续 滚动 的 图 片 栏目 ,如 图 4-15 所 示 。 


帮 连续 滚动 图 片 栏目 - Windows Internet Explorer 


人 
OO Orvis 


文件 到 ) 编辑 如 查看) 收 若 天 和) 工具 CD) 帮助 00D 
高 收 蕊 玉 。 | 医 庄 续 滚 动 图 片 栏目 


图 4-15 左右 连续 滚动 的 图 片 栏目 


任务 1 在 HTML 文档 中 添加 DIV 结构 。 
步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标签 之 间 。 
步骤 2 添加 div 标签 和 JavaScript 脚本 内 容 如 下 所 示 。 
<div id "coon"™> 
<div id "bt"> 多彩 的 校园 生活 < /div> 


59) 


<div jd "imglw>< img src= "./images/index 39.gif" width= "775" height= "8" />< /div> 
<div ji 中 "gg> 
<div id= "left"> < /div> 
<div id= "gundong"> 
< script language= "JavaScript1.2" type= "text/javascript"> 
var sliderwidth= 770 
var sliderheight= 128 
Var slidespeed= 1 
var leftrightslide= new Array() 
leftrightslige[1]= '<a href= "hamepage show.asp?id= 4195stype2 id= 19" target=" blank"> < img src 
="./images/hdl.jpg" alt=" 呀 乐 社团 " width= "160" height= "120" border= "0" class= "table- huikuang”" 
></a> 
leftrightslide[2]= '<a href= "hamepage_show.asp?id= 3991&type2 id= 19" target=" blankn"> < img src 
="./images/hd?2.jpg" alt=" 好 班长 : 丽 慧 " width= "160" height="120" border= "0" class= "table- 
huiang"> < /a> ' 
leftrightslide[3]= '<a href= "hamepage_show.asp?id= 37928type? id= 19" target=" blank"> < img src 
="./imeges/hdB3.jpg" alt=" 叶 演 图 片 : 功夫 " width= "160" height= "120" border= "0" class="table- 
huiang"> < /a> ' 
leftrightslide[4]= '<a href= "hamepage_show.asp?id= 2316stype?2 id= 19" target=" blank"> < img src 
="./images/hd4.jpg" alt=" 拷 河 比赛 " width= "160" height= "120" border= "0" class= "table- huikuang" 
></a>' 
leftrightslide[5]= '<a href= "hamepage_show.asp?id= 2315stype2 id= 19" target=" blank"> < img src 
=".Vimages/hd5.jpg" alt= 喇 师 风采 " width= "160" height= "120" border= "0" class= "table- huikuang" 
></a> 
leftrightslide[6]= '<a href= "hamepage_show.asp?id= 2314stype2 id= 19" target=" blank"> < img src 
="./images/hd6.jpg" alt= "学 生 宿 会 " width= "160" height= "120" border= "0" class= "table- huikuang" 
></a>' 
leftrightslide[7]= '<a href= "hamepage_show.asp?id= 2313stype?2 id= 19" target=" blank"> < img src 
="./images/hd7.jpg" alt= "设计 大 赛 " width= "160" height= "120" border= "0" class= "table- huikuang" 
></a> 
leftrightslide[8]= '<a href= "hamepage_show.asp?id= 2312stype2_id= 19" target=" blank"> < img src 
="./images/hd8.jpg" alt= "校园 早晨 "width= "160" height= "120" border= "0" class= "table- huikuang" 
></a> 
leftrightslide[9]= '<a href= "hamepage_show.asp?id= 2311&type2_id=- 19" target=" blank"> < img src 
="./images/hd9.jpg" alt= "参观 长 廊 " width= "160" height= "120" border= "0" class= "table- huikuang" 
></e>"' 
leftrightslide[10]= '<a href= "homepage_show.asp?id= 2310stype? id- 19" target=" blank"> < img src 
="./images/hd10.jpg" alt= 学生 演 唱 " width= "160" height= "120" border= "0" class= "table- huikuang" 
></a> 
leftrightslide[11]= '<a href= "homepage show-asp?id- 23098type? id- 19" target=" blank"> < img src 
= "Vimages/hdl1.jpg" alt= 喇 师 观摩 " width= "160" height= "120" border= "0" class= "table- huikuang" 
></a> 
leftrightslide[12]- '<a href- "homepage_show.asp?id- 2307gtype? id- 19" target=" blank"> < img src 
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= "Vimages/hdl2.jpg" at " 咬 园 黄昏 "width 中 60" height= "120" border= "0" class= "table_ huiluang" SS 
></a> 


1leftrightslide[13]= '< a href= "homepage show.asp?id= 2306stype? id= 19" target=" blank"> < img src 
="./images/hd13.jpg" at "号 车 专业 "width= "160" height= "120" border= "0" class= "table- huikuang" 
></a>"' 

leftrightslige[14]= '<a href= "homepage show.asp?id= 2305stype2 id= 19" target=" blank">< img src 
="./images/hd14.jpg" alt= " 吃 阳 "width= 四 60" height= "120" border= "0" class= "table- huikuang"> < /a 
PY 

leftrightslige[15]= '<a href= "homepage_show.asp?id= 2302gtype? id= 19" target=" blank"> < img src 
="./images/hd15.jpg" alt=" 多 媒体 教学 " width= "160" height= "120" border= "0" class="table- 
huilkmuang></a> 

Var copyspeedF slidespeed 

leftrightslide= '< ndbr> '+ leftrightslide.join(" ")+'< /ndbr>' 

var iedone document..all || dooument .getElementById 

if (iedcem) 

document.write ('< span id= "temp" style= "visibility:hidden;position: 

absolute;top:- 100; left:- 3000"> '+ leftrightslide+ '< /span> ') 

var actualwidth= "'' 

Var cross slide, ns slide 

finction fillup() { 

if (iedem) { 

Cross_slide= document .getElementById? document .getElementById ("test2") : dpcument.all.test2 

cross_ slideo= dhoment .getFlementById? dooment..getElementById("test3") : document .all .test3 

cross_ slide.innerHIMI= cross slide?2.innerHIMI= leftrightslide 

actualwidth= dpcument.al1? cross slide.offsetWidth : document .getElementById ("tenp") .offsetWidth 
cross_slide?.style.left= actualwidth+ 8} 

else if (document.layers) { 

ns slide= document.ns_slidemenu.dpcument.ns_slidemenu2 

ns slide2= document.ns slidemenu.docoument.ns slidemenu3 

ns_slide.docment .write (leftrightslide) 

ns_ slide.document.close() 

actualwidth= ns_slide.document .width 

na_slide2.left= actualwidtht 8 

ns slide?.document .write (leftrightslide) 

ns_ slide?.document.close()} 

lefttime= setInterval ("slideleft ()", 30) } 

window.onload- fillup 

finction sligeleft (){ 

if(iedm) { 

if (parseInt (cross slige.style.left)> (actualwidthx (-1)+8)) 

cross_slige.style.left=parseInt (cross slide.style.left)- copyspeed 

else 

cross slide.style.left=parseInt (cross slide2.style.lefb)+acbualwidthr 8 

if (parseInt (cross slide?.style.left)> (actualwidthx (-1)+8)) 


Te cross slide2.style.left= parseInt (cross slide?.style.left)- copyspeed 
else 
cross slidep.style.left= parseInt (cross slide.style.left)+actualwidHht 8} 
else if (document.layers){ 
if(ns slide.left> actualwidthx (-1)+8)) 
ns_slide.left- = copyspeed 
else 
ns_slige.left=ns slide?.left+ actualwidtht 8 
if(ns sliqe2.left> (actualwidth* (-1)+8)) 
ns slide?2.left-— = copyspeed 
else 
ns slide?2.left=ns slide.left+ actualwidtht 8}} 
if (iedeml| document. layers) { 
with(docoument) { 
Gocument .write('< div> ') 
if (iedem) { 
write('< div styler "position:relative;width: "+ sliderwidtht ';height: 
'+ sliderheightt+ ';overflow:hidien"> ') 
write ('< div style= "position:absolute;width: '+ sliderwidtht ';height: 
'+ sliderheight+ ';background- color:'+ slidebgoolor+ '" onMouseover= 
"oopyspeed= 0" onMouseout= "oopyspeed= slidespeed"> ') 
write('< div id "test2" style= "position:absolute;left:0;top:0"> < /div> ') 
write('< div id- "test3" style= "position:abeclute; left:- 1000;top:0'> < /div> ') 
write('< /div> < /div> ')} 
else if (document.layers) { 
wite('< ilayer Widthr '+ sliderwidtht ' height= '+ sliderheight+ ' name= "ns_slidemenu" bgcolor= '+ 
slidebgoolort "> ') 
write('< layer name= "ns_slidemenu2" left=0 top= 0 orMouseover= "ompyspeed= 0" onMouseout= "copyspeed 
= slidespeed"> < /layer> ') 
write('< layer name= "ns_slidemenu3" left=0 top= 0 orMouseover= "ompyspeed= 0" cnMpusecut= "copyspeed 
= slidespeed"> < /layer> ') 
write('< /ilayer> ')} 
Gocument .write('< /div> ')}} 
< /script> 
< /div> 
<div idF "right"> < /div> 
</div> 
< div id "img2"> < img src= "./images/index 41.gif" width= "775" height= 
"8" />< /div> 
</div> 
步骤 3 在 设计 窗口 中 显示 内 容 如 图 4-16 所 示 。 
任务 2 为 DIV 结构 创建 CSS 样式 。 
步骤 1 确定 添加 CSS 的 位 置 。 
步骤 2 在 HTML 文档 的 一 head 标签 对 之 间 相应 的 位 置 输入 定义 的 CSS 样式 代码 ， 
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图 4-16 添加 CSS 样式 表 前 左右 连续 滚动 的 图 片 栏目 效果 


具体 操作 方法 如 下 所 示 。 


< style type= "text/css"> 
* { margin: Opx; 
Padding: Opx; 
border: Opx;} 
a:link { 
color: #000000; 
text- decoration: none;} 
a:visited { 
text— decoration: none; 
color: # 000000;} 
a:hover { 
text— decoration: none; 
color: #FFE0000;} 
a:active { 
text— decoration: none; 
color: #660066;} 
#oon { 
height: 16lpx; 
width: Tgpx; 
margin left:Sx;} 
#con #9gg { 
height: 140px; 
width: 776rx;} 
.STYLE5 {color: # 456FEA; font— weight: bold; } 
#oon #imgl { 
height: Bpx; 
margin- top: px;} 
# con # img2 { 
height: ge;} 
#1eft { 
width: lpx; 
height:140px; 
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A background color:# 69B8E; 
float:left;} 
#right { 
wdth: lpx; 
height::140px; 
background- color:# 69B8DE; 
float:right;} 
# con div # gundeng { 
float: left; 
height: 130px; 
width: Tapx; 
Padding- top:10px;} 
#con #bt { 
background- image: url (./images/index bt.jpg); 
height: 20px; 
wigth: 77lpx; 
font— size:15px; 
Paddingr top: x; 
Padding- left:5pxy 
font- weight:bold; 
Color:# 900;} 
< /style> 


任务 3 测试 在 浏览 器 中 显示 效果 。 
462 制作 下 下 深 动 式 栏目 
上 下 滚动 式 栏目 即 网 页 元 素 滚动 的 方向 为 垂直 ,可 以 从 上 向 下 滚动 ,也 可 以 从 下 向 上 
滚动 。 
【任务 实施 】 


案例 制作 如 图 4-17 所 示 样 式 的 上 下 滚动 式 栏目 。 

任务 1 在 HTML 文档 中 添加 DIV 结构 。 

步骤 1 鼠标 定位 在 HTML 文档 的 二 body 二 二 /body 二 标签 之 间 。 
步骤 2 添加 div 标签 内 容 如 下 所 示 。 


<div id "con> 
< div id "bt"> gnbsp;< img sro= "./images/;odz1.png" widthr "20" height— 
中 7" /> gnbsp; 校 园 快讯 < /div> 
< div id "gundong> 


</div> 
</div> 


任务 2 创建 JavaScript 脚本 文件 。 


- 周 Fuastie 因 贺 [ 台 |[x] 


编辑 于 ) 查看 WD 收藏 交工 具 (CD) 下 助 了 0 
| 儿 上 Ti 栏目 


回 [简讯 ] 信息 分 院 举办 校园 歌手 大 

回 [ 阐 讯 ] 国际 交流 学 院 举办 放飞 梦想 英语 歌 

习 [ 简 讯 ] 国际 交流 学 院 汉语 言 学 习 留学 生 Farid 获 吉林 
回 闻 讯 ] 我 院 学 生 积极 参与 无 伴 献 血 

回 [ 阐 讯 ] 学 院 组 织 全 体 辅导 员 孝 观 东 北 民俗 馆 和 自然 


时 我 的 电脑 三 下 100k :| 


图 4-17 上 下 滚动 式 栏目 


步骤 1 打开 附件 下 的 记事 本 。( 或 者 在 站 点 根 文件 夹 中 的 other 文件 夹 下 新 建 扩展 名 
为 .js 的 脚本 文件 ) 
步骤 2 输入 JavaScript 脚本 文件 内 容 。 


document .write ("< marquee direction= 'up' scrollampunt= '1' scrolldelay= '50' id= 'u' width= '350' height= 

"150" = 'U.stop() ' ammousecut= "u.start () '> <a href= '# '> < img src= '.Vimages/jiantou.jpg' width 

= "11' height= '11' border= '0' /> gnbsp; [简讯 ] 信息 分 院 举办 校园 歌手 大 < /a> < /br> <a href= '# "> < img 

src= '.Vimages/jiantou.jpg' width= '11' height= '11' border= '0' /> [简讯 ] 国际 交流 学 院 举 办 放飞 梦想 英 

语 歌 < /a> < /br> <ahref 和 #'><ing sro= '.Vimegesy/jiantou.jpg' widthr '11' height= '11' border= '0' /> [简讯 ] 

国际 交流 学 院 汉语 言 学 习 留 学 生 Faria 获 吉林 …… </a> < /br> <a href= '# '> < img src= './inmeges/ 

jiantou.jpg' width= '11' height= '11' border= '0' /> snbsp; [简讯 ] 我 院 学 生 积极 参与 无 偿 献 血 < /a> < /br> 

<a href= '# "> < img src= ' ./images/jiantou.jpg' width= '11' height= '11' border= '0' /> gnibsp; [简讯 ] 学 院 

组 织 全 体 辅 导 员 参观 东北 民俗 馆 和 自然 …… < /a>< /br><a href- 但 ">< img src= './images/jiantou.jpg 

' width= '11' height= '11' border= '0' /> gnbsp; [活动 ] 旅游 分 院 举办 校园 主持 人 比赛 < /a>< /br><a href 

二 唱 '>< img src= '.Vimages/jiantou.jpg' width= "11' height= "11' border= '0' /> [活动 ] 旅游 分 院 举办 双 五 

论坛 活动 < /a>< /br><ahref- '# '>< img src= './imeges/jiantou.jpg' widthr '11' height= '11' border= '0' /> 

星 动 ] 汽车 分 院 开展 第 二 期 学 生 干 部 素质 拓展 训练 < /a> < /rarcqpee> ") 

注意 : 

(1) 在 代码 输入 过 程 中 不 要 回 车 换行 ,在 记事 本 中 可 以 使 用 格式 菜单 下 的 自动 换行 
命令 。 

(2) 制作 滚动 效果 时 ,使 用 脚本 文件 时 不 会 因为 滚动 内 容 多 而 破坏 设计 视图 下 的 DIV 
结构 。 

步骤 3 保存 文件 在 other 文件 夹 下 且 文 件 名 为 sxgd. js。 

步骤 4 光标 定位 在 二 div id 一 "gundong" 二 .</div 二 之 间 , 插 入 JavaScript 脚本 
文件 。 

步 又 5 在 设计 窗口 中 显示 内 容 , 如 图 4-18 所 示 。 

任务 3 为 DIV 结构 创建 CSS 样式 。 


Csjaey 
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步骤 1 确定 添加 CSS 的 位 置 。 DW mm- 0 &. | We [Cle 
上 村? 在 HTML 文 业 的 head 村 和 
之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ,具体 | 
操作 方法 如 下 所 示 。 | 


< style typer "text/css"> 
#gundong { 
font- size: 13px; 
line_ height: 25px; 
wigth:350px; 
height:140px; 图 4-18 添加 CSS 样式 表 前 上 下 滚动 
border- top: lpxsolid # 900; 式 栏 目 效果 
Fadding top:10px; 
Padding- bottam: 10px;} 
#bt { 
font— size: 20px; 
color:# 900? 
font- weight:bold; 
wiqdth:123px; 
border- bottam: 3px solid # 900;} 


#oon { 
height: 190px; 
width: 370px; 
border: 2px solid #000; 
padding_ left:10pxy 
Paddingr top:10px;} 
af 
olor:# 000? 
text- decoration:none;} 
</style> 


任务 4 测试 在 浏览 器 中 显示 效果 。 


4.6 任务 拓展 
利用 前 面 学 过 的 栏目 设计 知识 ,设计 制作 如 图 4-19 所 示 的 网 站 栏目 。 
4.7 本 章 小 结 
本 章 主要 介绍 了 网 站 栏目 的 含义 .网 站 栏目 的 策划 ,以 及 常用 网 站 栏目 如 简易 栏目 、 典 
型 栏目 TAB 选项 卡 式 栏目 视频 栏目 和 滚动 式 栏目 等 页 面 效果 的 设计 与 制作 。 网 站 栏目 


建设 的 好 与 坏 直接 影响 整个 页 面 的 效果 ,所 以 在 网 站 的 设计 制作 中 ,绝对 不 可 以 忽视 栏目 的 
创设 。 


三 任务 拓展 栏目 - Windows Internet Exrplorer 


OO run 
文件 四 ”编辑 轩 ) 查看 WD 收 认 夹 &) 工具 CL) 帮助 0 
寓 收 藏 严 | 志 任务 拓展 栏目 


[; 


| Tf | 更 多 -~ ED 更 多 -~ 

市政 协 十 一 届 二 次 会 议 居 秀 提 索 公示 2014.06.04 。 协商 成 效 重 在 " 实 "省 政协 提升 家 2014.05-30 
提案 委员 会 就 加 快 推进 " 北 药 -开发 如 2014.05.09 。 政协 经济 委 商 搞 流 生 组 就 大 力 发 展 2014.0529 
政协 委员 提案 助力 政府 夫 购 物 有 所 什 2014.03-13 。 。 市 政协 人 南开 委 如 开车 和 资源 综合 利用 20140520 
提案 委员 会 如 开 党 泊 团 体 提案 工作 座次 2014.0131 。 手背 梢 率 队 填 新 地 学 习 考察 提 淡 201405.04 
， 政协 山河 省 第 十 一 届 委 员 会 第 二 次 会 2014.0131 。 孝慈 梢 融 队 识 入 四 个 埋 城 调研 如 20140415 
内容 丰 富 关注 民生 2014.0131 。 ，。 民 宗 要 凋 明宗 孝 界 开办 养老 院 和 况 2014.092 


| ew | 更 多 >> | wk | 更 多 >> 


密切 联系 群众 是 ， iii 明示 女真 社会 氏族 .…… 
当前 ， 全 党 正在 开展 以 "为 民 务实 滞 各 油 了 的 先 民 在 明代 守 泛 称 为 妇 臣 ， 
康 - 为 主要 内 容 的 党 的 如 次 路 如 教育 实 全 其 社会 发 展 水 平 以 及 地 理 分 布 ， 


路 活动 。 密 切 党 又 分 称 为 建 州 廊 真 、 海 


，* 把 调查 研究 作为 做 好 政协 工作 的 重 2014.09.26 。 ，。 黑 龙山 格 军 考 山 之 死 2014-05-30 


， 考题 调研 与 考场 协商 一 协商 民主 2014.05-12 。， 因 龙 山 档案 党 局 闻 清 代 档 案 概况 2014.05.29 
* 提高 建言 质量 促进 协商 民主 发 展 2014.03-12 。 ，。 清 代 黑 龙山 格 军 与 东部 边 世 治理 2014.0520 
”服务 + 考核 + 座 励 激发 委员 动力 新 举 2014-0131 。 ，。 义和团 运动 在 黑龙 江 ， 
， 推 进 基层 政 协 协 商 民主 有 序 深 入 开 东 2014.01.27 。， 毛 洋 青 纪念 馆 . 


2014.05.04 
2014.04.15 


图 4-19 任务 拓展 栏目 效果 


习 是 


(1) 栏目 可 以 分 为 哪 几 种 ? 简 述 每 种 栏目 的 特点 。 
(2) 在 制作 网 页 栏目 前 应 先 做 哪些 准备 工作 ? 


表单 页 面 设 计 gs 


在 网 页 中 常用 表单 来 实现 内 容 交互 ,通过 表单 来 收集 用 户 信息 ,并 进行 处 理 存储 等 , 通 
过 表单 功能 ,可 以 制作 一 些 如 用 户 注册 ,搜索 、 评 论 、 调 查 、 交 易 等 表单 页 面 。 


本 章 要 点 


5.1 表单 概述 


511 表单 的 概念 


表单 是 用 来 收集 访问 者 信息 的 域 集 。 从 用 户 收集 信息 ,然后 将 这 些 信 息 提交 给 服务 器 
进行 处 理 。 表 单 可 以 包含 允许 用 户 进行 交互 的 各 种 元 素 。 例 如 文本 框 \ 列 表 框 、 复 选 框 , 单 
选 按钮 等 。 站 点 访问 者 填 表单 的 方式 是 输入 文本 , 单 击 单 选 按 钮 . 复 选 框 ,从 下 拉 列 表 中 选 
择 选 项 等 。 在 填 好 表单 之 后 ,站 点 访问 者 便 送 出 所 输入 的 数据 ,该 数据 就 会 根据 所 设置 的 表 
单 处 理 程序 ,以 各 种 不 同 的 方式 进行 处 理 。 


512” 创 建 表单 
在 XHTML 中 ,使 用 二 form> 标 记 来 定义 表单 ,基本 语法 格式 如 下 : 
< fom name= "表单 名 " method= "get | post" action= "URL"> 
表单 元 素 
< /fom> 
表单 标记 的 基本 属性 如 表 5-1 所 示 。 
method 属性 ,指定 将 表单 数据 传输 到 服务 器 的 方法 ,其 取 值 可 以 是 以 下 两 种 。 


post: 在 HTTP 请 求 中 嵌入 表单 数据 。 
get: 将 表单 数据 附加 到 请 求 该 页 的 URL 中 。 


表 5-1 form 标记 基本 属性 说 明 


属 人 性 属 性 值 描 述 
action URL 规定 当 提交 表单 时 ,向 何 处 发 送 表 单数 据 
method get | post 向 指定 URL 传送 数据 的 HTTP 方法 ,默认 为 get 
_self _self: 在 当前 窗口 打开 
_blank _blank: 在 新 窗口 打开 
target _parent _parent: 在 上 层 窗口 打开 
_top _top: 在 顶层 窗口 打开 
窗口 名 窗口 名 : 在 指定 的 窗口 打开 
name 字符 串 定义 表单 的 名 称 
accept-charset 字符 集 名 称 列表 服务 器 处 理 表单 数据 所 接受 的 字符 集 
enctype MIME 类 型 规定 表单 数据 在 发 送 到 服务 器 之 前 的 编码 类 型 


注意 : 若 要 使 用 get 方法 发 送 长 表单 ,URL 的 长 度 应 限制 在 8192 个 字符 以 内 。 如 果 发 
送 的 数据 量 太 大 ,数据 将 被 截断 ,从 而 导致 意外 或 失败 的 。 此 外 ,在 发 送 用 户 名 和 密码 、 信 用 
卡号 或 其 他 机 密 信息 时 ,不 要 使 用 get 方法 ,而 应 使 用 post 方法 。 

accept-charset 属性 ,允许 您 指定 一 系列 字符 集 ,服务 器 必须 支持 这 些 字 符 集 ,从 而 得 
以 正确 解释 表单 中 的 数据 。 该 属性 的 值 是 用 引号 包含 字符 集 名 称 列表 。 如 果 可 接受 字 
符 集 与 用 户 所 使 用 的 字符 即 不 相 匹 配 的 话 , 浏 览 器 可 以 选择 忽略 表单 或 是 将 该 表单 区 别 
对 待 。 此 属性 的 默认 值 是 unknown”, 表 示 表 单 的 字符 集 与 包含 表单 的 文档 的 字符 集 
相同 。 

enctype 属性 ,多 用 于 网 际 邮件 扩充 协议 ,规定 表单 数据 在 发 送 到 服务 器 之 前 的 编码 类 
型 。 在 XHTML 中 主要 有 三 种 表单 数据 编码 类 型 : application/x-www-form-urlencoded、 
multipart/form-data 和 text/plain 。 

application/x-www-form-urlencoded: 表单 数据 被 编码 为 名 称 / 值 对 。 这 是 标准 的 编码 
格式 ,也 是 默认 的 编码 格式 。 

multipart/form-data: 表单 数据 被 编码 为 一 条 消息 ,表单 的 每 个 元 素 对 应 消息 中 的 一 个 
部 分 ,主要 应 用 在 文件 数据 传输 上 。 使 用 这 种 类 型 ,再 提交 表单 ,那么 在 表单 接收 方 就 不 能 
取 到 除 file 类 型 以 外 的 表单 元 素 的 值 。 

text/plain: 表单 数据 以 纯 文 本 形式 进行 编码 ,其 中 不 含 任何 表单 元 素 或 格式 字符 。 


513 表单 元 素 


1 文本 输入 框 和 密码 输入 框 

如 果 要 获取 用 户 输入 的 一 行 信息 ,可 以 在 表单 中 添加 文本 输入 框 。 在 XHTML 中 ,可 
以 使 用 二 input 二 标记 来 创建 文本 输入 框 ,根据 其 type 属性 值 的 不 同 分 为 文本 输入 框 和 密 
码 输 入 框 两 种 。 这 两 种 文本 框 实际 上 是 一 样 的 ,只 是 在 密码 框 中 输入 的 文本 是 用 圆 点 显示 
的 。 文 本 输入 框 和 密码 输入 框 基本 属性 说 明 如 表 5-2 所 示 。 


1 Miony 


108 ， 
A 表 5-2 文本 输入 框 和 密码 输入 杠 属 性 说 明 
属性 属 性 什 描 述 
text 定义 为 单行 文本 框 
Es ok 定义 为 密码 输入 框 ,文本 以 “。” 的 形式 显示 
i 字符 申 定义 元 素 的 名 称 
字符 申 定义 元 素 中 显示 的 初始 文本 
de 数字 定义 输入 字段 的 显示 宽度 。 以 字符 数 为 单位 
We 数字 规定 输入 字段 中 的 字符 的 最 大 长 度 
li ed 规定 输入 字段 为 只 读 
disabled disabled 当 input 元 素 加 载 时 禁用 此 元 素 


在 XHTML 中 创建 文本 输入 框 和 密码 输入 框 ,基本 代码 如 下 ,效果 如 图 5-1 所 示 。 


账户 : < input name= "uid" type= "text" size= "20" maxlength= "30" /> 
密码 : < input name= "pwd" type= "password" size= "20" maxlength= "30" /> 


| 账户 : ladmin 高 码 : eeeeeeeew 


图 5-1 单行 文本 框 和 密码 输入 框 


2 按钮 .提交 按钮 和 复位 按钮 

在 XHTML 中 ,可 以 使 用 二 input 二 标记 来 创建 按钮 。 根 据 二 input 二 标记 的 type 属性 
值 的 不 同 将 按钮 分 为 四 种 。 自 定义 按钮 (type 二 "button") ,提交 按钮 (type 二 "submit")、 复 
位 按钮 (type 二 "reset") 和 图 像 按 钮 (type 二 "image")。 自 定义 按钮 .提交 按钮 ,复位 按钮 和 
图 像 按钮 的 基本 属性 如 表 5-3 所 示 。 


表 5-3 “ 自 定 义 按钮 .提交 按钮 .复位 按钮 和 图 像 按钮 基本 属性 说 明 
属性 属性 什 描述 
button 。 | 定义 为 自 定义 按钮 
submit | 定义 为 提交 按钮 ,放置 在 表单 中 才 会 有 效果 
定义 为 复位 按钮 ,放置 在 表单 中 才 会 有 效果 
Lee 定义 为 图 像 按钮 ,图 像 按钮 由 一 张 图 像 组 成 , 它 的 功能 等 同 于 提交 按钮 
字符 串 ”| 定义 按钮 的 名 称 
i 字符 串 ”| 定义 按钮 上 显示 的 文本 
有 URL 定义 图 像 按钮 的 URL, 只 适用 图 像 按钮 
二 字符 串 。 | 定义 图 像 的 替代 文本 ,只 适用 图 像 按钮 
disabled | disabled | 当 input 元 素 加 载 时 禁用 此 元 素 


在 XHTML 中 创建 自 定义 按钮 .提交 按钮 ,复位 按钮 和 图 像 按 钮 ,基本 代码 如 下 ,效果 


如 图 5-2 所 示 。 


第 5 章 表单 页 面 遇 和 


< input type= "button" name= "but bt" value= " 自 定义 按钮 " /> 

< input type= "submit" name= "but ab" value= "得 交 按 钮 " /> 

< input type= "reset" name= "but rt" value= "复位 按钮 " /> 

< input type= "image" name= "but img" sro= "images/imagebutton.gif" /> 


自 定义 按钮 提交 按 馈 】 [复位 按 馈 Pow 


图 5-2 自 定义 按钮 .提交 按钮 .复位 按钮 和 图 像 按钮 


3 复 选 框 和 单 选 按钮 
如 果 想 获取 用 户 的 选项 信息 ,可 在 表单 中 添加 复 选 框 或 单 选 按钮 ,两 者 功能 不 通 。 复 选 


框 实现 “多 选 多 ”组 选 ; 单 选 按 钮 实现 “多 选 一 ”组 选 。 在 XHTML 中 ,可 以 使 用 二 input 二 标 
记 来 创建 复 选 框 (type 二 "checkbox")、 单 选 按钮 (type 二 "radio"), 复 选 框 和 单 选 按钮 基本 属 
性 如 表 5-4 所 示 。 
表 5$-4 复 选 框 和 单 选 按钮 基本 属性 说 明 
属 性 属性 值 描 述 


type 


checkbox | 定义 为 复 选 框 
radio 定义 为 单 选 按钮 


name 


字符 品 定义 元 素 的 名 称 , 单 选 按钮 (或 复 选 框 ) 通 常 是 成 组 使 用 的 ,同一 组 单 选 按钮 
(或 复 选 框 ) 的 name 属性 值 必须 相同 


value 


字符 串 定义 元 素 的 值 


checked 


元 素 设置 为 选中 状态 。 复 选 框 可 以 设置 多 个 选项 的 checked; 同 一 组 单 选 按钮 


checked 中 只 能 设置 一 个 选项 的 checked 


disabled 


disabled 当 input 元 素 加 载 时 禁用 此 元 素 


在 XHTML 中 创建 复 选 框 和 单 选 按钮 ,基本 代码 如 下 ,效果 如 图 5-3 所 示 。 


<div aligr= "oanter"> 


请 问 你 学 过 哪些 网 页 制作 技术 2<br /> 

< input name— "web" type= "checkbox" value= "HIML" checked- "checked" /> HIML 
< input name— "web" type= "checkbox" value= "JavaScript" checked "checked" /> JavaScript 
< input name= "web" type= "checkbox" value= "CSS"/> XML 

< input namer "web" typer= "checkbox" valuer "ASP" checked- "checked" />ASP 
< input name= "web" type= "checkbox" value= "PHP" /> PHP <br /><br /> 

请 问 你 学 过 哪 一 种 网 页 制作 技术 x<br /> 

< input type= "radio" name= "web" value= "HIML" checked= "checked" /> HIML 

< input type= "radio" name= "web" value= "JavaScript" /> JavaScript 

< input type= "radio" name= "web" value= ML" /> ML 

< input type= "radio" name= "web" value= "ASP" />ASP 

< input type= "radio" name= "web" id- "radio5" value= "PHP" /> PHP 


</div> 
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请 问 你 学 过 哪些 网 页 制作 技术 ? 
回 HDL 回 JavaScript OD XM 回 ASP OD PHP 


请 问 你 学 过 哪 一 种 网 页 制作 技术 ? 
© HL © JavaScript © XML © ASP © PHP 
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4 文件 域 
如 果 想 使 用 户 具备 文件 上 传 的 功能 ,就 必须 使 用 文件 域 。 在 XHTML 中 ,可 以 使 用 
一 input 过 标记 来 创建 复 选 框 (type= "file") ,文件 域 基本 属性 如 表 5-5 所 示 。 


表 5-5 文件 域 属 性 说 明 


属 性 属 性 值 描 述 

be file 文件 域 由 一 个 文本 框 和 一 个 “浏览 "按钮 组 成 ,点 击 按钮 可 以 在 磁盘 上 选择 
文件 ,文本 框 中 可 显示 选中 文件 的 路 径 

name 字符 串 定义 文件 域 的 名 称 

size 数字 定义 文本 框 的 显示 宽度 。 以 字符 数 为 单位 

disabled disabled 当 input 元 素 加 载 时 禁用 此 元 素 

accept MIME 类 型 | 规定 通过 文件 上 传 来 提交 的 文件 的 类 型 


在 XHTML 中 创建 文件 域 基本 代码 如 下 ,效果 如 图 5-4 所 示 。 

< form actionr mm method= "post" enctype= "rmltipart/form- data" name= "myform> 
图 片 : < input type= "file" name= "filename" size="30" /> 

< /fom> 


图 片 ， | 
图 5-4 文件 域 


5 隐藏 域 
在 XHTML 中 ,可 以 使 用 二 input 二 标记 来 创建 隐藏 域 (type 二 "hidden")。 在 网 页 浏览 
时 隐藏 域 不 会 显示 出 来 ,但 是 用 户 可 以 通过 查看 XHTML 的 源 代码 看 到 该 元 素 属性 的 值 ， 
所 以 请 注意 ,不 要 用 该 元 素 传递 敏感 信息 ,其 基本 属性 如 表 5-6 所 示 。 
表 5-6 ”隐藏 域 基本 属性 说 明 


属性 属性 值 描 述 

type hidden 隐藏 域 不 会 显示 出 来 ,主要 在 程序 中 传递 数据 时 使 用 
name 字符 串 定义 元 素 的 名 称 

value 字符 串 定义 元 素 的 初始 值 


在 XHTML 中 创建 文件 域 基本 代码 如 下 所 示 。 


< input type- "hidden" name- "hiddenFielg" value= "字符 串 " /> 
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6 文本 区 域 框 

通过 前 面 的 学 习 , 了 解 到 单行 文本 框 可 以 获取 用 户 输入 的 一 行 信息 , 那 如 何 获 取 多 行 用 
户 输入 的 信息 ? 在 XHTML 中 ,可 以 使 用 一 textarea 二 标记 创建 一 个 多 行 的 .可 滚动 的 文本 
输入 框 ,允许 用 户 输入 较 长 的 文本 ,弥补 一 input 二 标记 只 能 输入 一 行文 本 的 不 足 。 在 
去 textarea 二 和 去 /textarea 盖 之 间 放 置 的 内 容 是 文本 框 中 显示 的 初始 文本 ,该 文本 是 纯 文 
本 ,如 果 其 中 包含 有 XHTML 标记 ,也 会 原样 显示 在 文本 框 中 。 二 textarea 记 标记 基本 属性 
如 表 5-7 所 示 。 

表 5-7 一 textarea 一 标记 基本 属性 说 明 


属 性 属 性 值 描 述 
name 字符 串 定义 元 素 的 名 字 
cols 数字 定义 元 素 中 可 见 的 列 数 ,该 属性 影响 元 素 宽度 
Tows 数字 定义 元 素 中 可 见 的 行 数 , 该 属性 影响 元 素 高 度 
readonly readonly 规定 输入 字段 为 只 读 
disabled disabled 当 textarea 元 素 加 载 时 禁用 此 元 素 


在 XHTML 中 创建 文本 域 基本 代码 如 下 ,效果 如 
文本 祈 葡 从 
图 5-5 所 示 。 


< textarea name= "oontent" oc0ls= "40" rows= "4" id= "content" 


> 文本 初始 值 < /textarea> 图 5-5 文本 区 域 框 


7 菜单 /列表 
在 XHTML 中 ,通过 二 select 二 和 二 option 二 标记 可 以 创建 一 个 下 拉 菜 单 或 者 选项 列 
表 , 其 中 过 option 之 标记 用 于 定义 列表 框 中 的 列表 项 目 , 志 select 之 和 所 option 二 标记 基本 属 
性 如 表 5-8 所 示 。 
表 5-8 二 select 二 和 一 option 二 标记 基本 属性 说 明 


标记 | 属 性 属性 值 描 述 


name 字符 串 定义 select 元 素 的 名 称 
定义 select 元 素 中 可 见 的 行 数 ,默认 值 为 1。 当 size 为 1 时 ,可 得 
Slze 数字 


到 一 个 下 拉 式 列表 框 ; 当 size 大 于 1 时 ,得 到 一 个 多 行列 表 框 
multiple multiple 当 值 为 multiple 时 , 按 住 Ctrl 键 允许 多 选 


select 


disabled disabled 当 值 为 disabled 时 ,元 素 加 载 时 禁用 此 元 素 
value 字符 串 列表 项 的 值 ,在 提交 表单 时 ,被 选中 的 列表 项 的 值 会 被 提交 


当 值 为 selected 时 ,该 列表 项 为 选中 状态 。 对 单 选 的 列表 框 , 只 能 
有 一 个 选中 的 列表 项 


disabled disabled 当 值 为 disabled 时 ,元 素 加 载 时 禁用 此 元 素 


option selected selected 


Csjaey 


在 XHTML 中 创建 下 拉 菜单 或 者 选项 列表 基本 代码 如 下 ,效果 如 图 5-6 所 示 。 


< select name="s_only"> 
< cption> HIMIK /option> 二 ~ ET 图 
< cption> XHIMIK /cption> [ss 加 
ope de ont Tavascript 
< option> Javascript< /option> 图 5-6 下 拉 菜 单 或 者 选项 列表 
</select> 


< select name="s ml" multipler "mltiplen size= "3"> 
< caption value= "1"> HIMIK /option> 
< option value= "2"> xHIMIK /cption> 
< option value= "3"> CSs< /cption> 
< option value= "4"> JavaScript< /option> 
< /select> 
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表单 布局 主要 指标 签 与 输入 区 之 间 的 位 置 关系 。 目 前 常用 的 布局 方式 主要 有 四 种 对 章 
方式 : 标签 垂直 项 对 齐 ,标签 水 平 右 对 齐 、 标 签 水 平 左 对 齐 ,标签 在 输入 区 内 部 。 


1 标签 垂直 项 对 齐 

标签 和 输入 区 垂直 依次 排列 ,降低 了 对 页 面 宽度 的 要 求 , 如 图 5-7 所 示 。 如 果 页 面 没有 
富余 的 空间 用 于 标签 和 输入 区 的 横向 排列 ,这 种 布局 是 个 不 错 的 选择 。 用 户 自 上 而 下 的 扫 
描 表 单 ,焦点 多 集中 在 左 侧 一 列 , 且 跳动 较 小 。 

2 标签 水 平 右 对 齐 

标签 右 对 齐 与 输入 区 水 平 排列 ,降低 了 对 页 面 高 度 的 要 求 , 如 图 5-8 所 示 。 此 种 布局 方 
式 ,标签 离 输入 区 很 近 ,缩短 了 各 输入 区 间 的 垂直 空间 。 但 是 ,由 于 标签 是 右 对 齐 , 且 标签 文 
字 左 侧 参差 不 齐 ,使 用 户 对 问题 的 认 知 和 扫描 时 间 变 得 更 长 。 


电子 邮箱 
密码 
确认 密码 电子 邮箱 
密码 ] 
昵称 [rr 
确认 密码 
验证 码 mS 
WA 
A sai ND 
贺 我 已 阅读 并 同意 相关 服务 条 款 贺 我 已 阅读 并 同意 相关 服务 条 款 
立即 注册 立即 注册 


图 5-7 标签 垂直 顶 对 齐 图 5-8 标签 水 平 右 对 齐 
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3 标签 水 平 左 对 齐 

标签 左 对 齐 和 输入 区 水 平 排列 ,降低 了 对 页 面 高 度 的 要 求 ,如 图 5-9 所 示 。 标 签 左 对 齐 
有 利于 用 户 对 问题 标签 的 扫描 ,但 不 利于 填写 答案 ,因为 标签 距离 输入 区 较 远 ,要 重新 定位 
到 右 侧 输入 框 ,确实 要 消耗 一 点 时 间 。 用 户 花 在 定位 输入 区 上 的 时 间 比 看 清 标签 更 长 ,从 而 
影响 了 整个 表单 的 完成 时 间 。 

4 标签 在 输入 区 内 部 

标签 在 输入 区 内 部 显示 ,如 图 5-10 所 示 。 此 种 方式 虽然 具备 垂直 组 合 的 优点 ,但 仍 应 
谨慎 使 用 。 当 焦点 移 人 输入 区 后 ,标签 消失 ,看 不 到 问题 ,可 能 会 忘记 要 回答 什么 ,不 得 不 清 
掉 输入 好 的 字 , 把 “问题 ”还 原 出 来 。 这 种 组 合 比较 适合 只 有 一 两 个 输入 框 的 简短 表单 ,而 且 
很 熟悉 ,不 用 费力 去 记 住 标签 提出 的 问题 。 


电子 邮箱 电子 邮箱 | 

宣 妈 密码 | 

确认 密码 确认 密友 | 

昵称 ER | 

验证 码 BA 验证 码 AN 
团 我 已 阅读 并 同意 相关 服务 条 款 团委 已 阅读 并 同意 相关 服务 条 孝 


图 5-9 标签 水 平 左 对 齐 图 5-10 标签 在 输入 区 内 部 


如 果 选 择 用 这 种 表单 的 时 候 , 需 注 意 让 标签 和 真实 内 容 区 分 开 来 ;一些 约定 俗 成 的 做 法 
使 用 减 淡 标 签字 色 。 


5.2 搜索 表单 设计 
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随 着 互联 网 发 展 ,搜索 网 民 不 断 递 增 , 搜 索引 擎 在 网 络 应 用 的 使 用 率 不 断 增高 , 仅 低 于 
即时 通信 ,网 络 搜索 已 经 成 为 用 户 获取 信息 的 重要 ,便利 渠道 。 搜 索 表 单 作为 用 户 与 搜索 引 
擎 交互 的 平台 ,主要 由 文本 输入 框 和 提交 按钮 构成 。 其 中 ,文本 输入 框 接收 用 户 输入 的 关键 
字 , 提 交 按 钮 负责 将 输入 信息 反馈 给 指定 的 处 理 文件 ,然后 显示 搜索 结果 ,用 户 根据 结果 针 
对 性 地 选择 信息 ,各 种 搜索 界面 如 图 5-11 一 图 5-14 所 示 。 


4 
属 
Bai 人 中 百度 
新 闻 网 页 贴吧 知道 音乐 图 片 视 须 地 图 百科 文 庆 更 多 >> 


5-11 百度 搜索 
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ne 


(GS) 搜狗 搜索 


园 
新 闻 网 页 微 信 问 问 图 片 视频 音乐 地 图 百科 购物 更 多 >> 


_ 捍 过 “| 襄 B 反 二 
图 5-12 搜狗 搜索 
armen 徽 情 ~ | 大 家 正在 搜 : 绿色 猎 味 匠 司 
图 5-13 新 浪 搜索 
i 目的 地 /酒店 /最 点 /关键 字 1Q| 


图 5-14 ”携程 搜索 
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百度 搜索 条 由 Logo、 文 本 输入 框 和 提交 按钮 构成 ,如 图 5-15 所 示 。 文 本 输入 框 负责 接 
收 用 户 输入 的 关键 字 ,提交 按钮 负责 将 用 户 输 入 的 关键 提交 到 服务 端 文件 。 文 本 输入 框 , 提 
交 按钮 与 Logo 底 端 对 齐 。 


Bai 度 | 


图 5-15 百度 搜索 条 


【任务 实施 】 


案例 ”制作 百度 搜索 条 。 
任务 1 插入 div 标签 。 
步骤 1 新 建 网 页 文件 ,插入 div 标签 ,并 命名 为 search。 
<div id "seardh"> 此 处 显示 ia "search" 的 内 容 < /div> 
步骤 2 设置 通配符 (* ) 样 式 ,清除 所 有 标签 的 边 距 和 补 白 。 
*{ 
margin: Opx; 
Padding: Opx; 
} 


步骤 3 设置 div 标签 宽 和 高 。 


提 search { 

height: 40px; 

Width: 7o0pe; 

} 

任务 2 插入 Logo。 

步骤 1 在 div 中 插入 Logo 图 片 。 


< img src= "baiqu.gif" alt= " 喇 度 搜索 " width= "117" height= "38" class= "al bot"> 
步骤 2 设置 图 片 样式 。 设 置 图 片 底 端 对 齐 .右边 距 和 下 边 距 ,如 图 5-16 所 示 。 


.al bot { 
vertical- align: bottamy 
margin right: 10px; 
margin- bottam: Spx; 


图 5-16 插入 百度 Logo 


任务 3 插入 表单 。 
根据 图 5-15 所 示 插 入 表单 及 其 元 素 ,表单 及 其 元 素 的 基本 属性 如 表 5-9 所 示 。 


表 5-9 搜索 表单 及 其 元 素 说 明 


名 称 类 型 初始 值 含 义 

forml form 二 表单 

word text == 文本 输入 框 

btu submit 百度 一 下 提交 按钮 
相关 代码 如 下 所 示 。 


<div id "search"> 
< fom name= "fomml" method= "post" action= "http://www.baidua.combaidun> 
<img srcr "baidu.gif" alt=" 百 度 搜索 " width= "117" height= "38" class= 
"al bot"> 
< input name= "word" type= "text" id "word" size= "42" maxlength= "100"> 
< input type= "submit" name= "btu" id "btu" value= "百度 一 下 "> 
< /fom> 
</div> 


网 页 浏览 效果 如 图 5-17 所 示 。 


0 
Bai 百度 二 
图 5-17 插入 表单 后 的 浏览 效果 


1 oy 
任务 4 设置 表单 样式 。 
步骤 1 设置 word 文 本 框 样式 。 设 置 文本 框 宽 、 高 、 字 号、 行 高 、 左 补 白 、 边 框 和 底 端 
对 齐 。 


#word { 
height: 32px; 
width: 400px; 
font— size: 17px; 
1line height: 32px; 
Paddingr left: 10px; 
border: lpx solid # 09C; 
vertical- align: bottam; 
} 


步骤 2 设置 btu 按钮 样式 。 


#btu { 
height: 34px; 
width: 100px; 
background- color: #09C; 
font— size: 15px; 
color: # FFF; 
border: lpx solid # 096; 
font- weight: bold; 

} 


页 面 浏 览 效 果 如 图 5-18 所 示 。 


0 -一 
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图 5-18 ”完成 后 浏览 效果 


5.3 跟 帖 评论 表单 设计 
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跟 帖 评论 是 网 民 表 达意 见 的 渠道 .互动 交流 的 广场 、 奥 论 监督 的 平台 。 跟 帖 评论 表单 作 
为 用 户 与 网 络 评论 系统 交互 的 平台 ,主要 由 文本 区 域 框 . 文 本 输入 框 提 交 按 钮 构成 。 其 中 ， 
文本 区 域 框 接收 用 户 输入 的 评论 内 容 ,提交 按钮 负责 将 评论 内 容 反馈 给 指定 的 处 理 文件 , 然 
后 显示 评论 列表 。 


532 制作 跟 帖 评论 页 面 


网 友 评 论 页 面 主要 由 一 个 文本 区 域 框 \ 两 个 文本 输入 框 和 一 个 按钮 构成 。 跟 帖 评论 如 
图 5-19 所 示 ,页 面 效果 如 图 5-20 所 示 。 


网 友 跟 帖 请 登录 后 进行 评论 。 工人 参与 。 O 人 跟 帖 


请 文明 发 言 , 还 可 以 答 和 14O 字 


图 5-19 跟 帖 评论 


请 箱 入 评论 内 容 


5-20 跟 帖 评论 页 面 效 果 


【任务 实施 】 


案例 ”制作 发 表 评 论 页 。 
任务 1 搬入 div 标签 。 
步 又 1 新 建 网 页 文件 ,插入 div 标签 ,并 命名 为 comment。 


<div id "comment"> 
此 处 显示 ia "comment" 的 内 容 
</div> 
步骤 2 设置 通配符 (* ) 样 式 ,清除 所 有 标签 的 边 距 和 补 白 。 
*{ 
Pedding:0; 


margin:0; 
} 


步骤 3 设置 div 标签 宽 、 高 、 补 白 、 背 景 和 字号 。 


# ccmment { 
height: 160pz; 
width: 500pz7 
Padding: 10px; 
background- color: # 9C3; 
border: lpx solid # 666; 
font— size: 13px; 

» 


效果 如 图 5-21 所 示 。 


5-21 插入 div 标签 后 效果 
任务 2 添加 评论 标题 。 


添加 跟 帖 评论 标题 ,并 设置 颜色 字体、 字号 和 下 补 白 , 页 面 浏览 效果 如 图 5-22 所 示 。 


<h 人 发 表 评 论 < /人 
h4{ 
color: # 333; 
font— family: Verdana, Geneva, sans- serif; 
font- size: 17px; 
Padding- bottam: Spx; 


图 5-22 添加 标题 后 浏览 效果 


任务 3 插入 表单 。 


根据 图 5-20 所 示 插 入 表单 及 其 元 素 ,表单 及 其 元 素 的 基本 属性 如 表 5-10 所 示 。 


表 5-10 评论 表单 及 其 元 素 说 明 


名 称 类 型 初 始 值 含义 
forml form 二 表单 

msg areatext 请 输入 评论 内 容 文本 区 域 框 
uid input/text 邮箱 /账号 / 微 博 文本 输入 框 
pwd input/text 请 输入 密码 文本 输入 框 
btu input/submit 发 表 评 论 提交 按钮 
相关 代码 如 下 所 示 。 


< fom id= "forml" name= "foml" method= "post" acticon= "> 
< 了 
< textarea name= "msg" class= "txa"> 请 输入 评论 内 容 < /textarea> 
< 人 必 


y i 


< input neme= "vid" type= "text" class= "ipt" id= "vig" value= 嘟 箱 / 账 号 / 微 博 " /> 

< input name= "pwd" type= "text" class= "ipt" id "pwd" value= "请 输入 密码 " /> 

< input name= "button" type= "submit" class= "btu" id= "button" value= "发 表 评论 " /> 
< /fom> 


插入 表单 后 ,浏览 页 面 ,如 图 5-23 所 示 。 


CLL TT 


5-23 ”添加 表单 后 浏览 效果 


任务 4 设置 表单 样式 。 
步骤 1 设置 文本 输入 框 样式 。 设 置 文本 输入 框 宽 ,高 ,边框 , 左 补 白 和 垂直 居中 对 齐 。 
在 同一 行 实现 多 个 表单 元 素 水 平 对 齐 时 ,多 采用 “vertical-align: middle; "这 种 方式 。 
“ipt { 
height: 25px; 
width: 180pxy 
border: lpx solid # 666; 
color: #00c; 
Padding- left: 10px7 
Vertical- align: middle; 


步骤 2 设置 文本 区 域 框 样式 。 主 要 设置 文本 区 域 框 宽 .高 .文字 颜色 、 补 白 等 。 其 中 ， 
通过 “overflow: hidden; ”隐藏 文本 区 域 框 的 滚动 条 。 


-ta f 
height: 90px; 
width: 490px; 
overflow: hidden; 
color: # 999; 
Padding: Spx; 
} 
步骤 3 设置 提交 按钮 样式 。 设 置 按钮 背景 .边框 ,文字 颜色 、 宽 、 高 等 ,浏览 效果 如 
图 5-20 所 示 。 


-btu { 
background- color: # 060; 
border: lpx solid # 060; 
font- weight: bold; 
Color: #FFEF; 


so 


height: 27px; 
width: 80px; 

明 

任务 5 添加 JS 脚本 。 

在 跟 帖 评论 表单 布局 中 ,采用 了 内 蔡 式 布局 方式 ,在 三 个 重要 的 输入 框 中 显示 提示 语 ， 
因此 造成 的 pwd 输入 框 为 文本 输入 框 , 即 type= "text"。 但 是 ,根据 评论 表单 的 设计 功能 该 
为 密码 输入 框 , 即 type 二 "password"。 因 此 为 了 实现 该 功能 在 原 标签 内 加 入 如 下 JS 脚本 。 

onfocus= "if (this.value= = defaultValue) {this.value= '';this.type= 'password'}" onblur="if (!value) 

{value= defaultValue; this.type= 'text';}" 

onfocus 事件 在 对 象 获得 焦点 时 发 生 ;onblur 事件 在 对 象 失 去 焦点 时 发 生 。 通 过 以 上 
脚本 ,实现 了 当 鼠 标 单 击 “pwd” 输 入 框 时 ,该 输入 框 由 文本 框 变 为 密码 框 ,输入 密码 时 显示 ， 
如 图 5-24 所 示 。 


图 5-24 加 入 JS 脚本 后 浏览 效果 


5.4 注册 表单 设计 


541 表单 及 其 作用 


发 邮件 ,发 微 博 、 玩 网 游 . 网 购 、 网 上 招聘 、 网 上 预订 等 ,这 些 已 成 为 当今 互联 网 应 用 的 主 
要 行为 ,受到 广大 网 络 用 户 尤 其 是 青年 用 户 的 青睐 。 访 问 者 要 体验 以 上 的 网 络 应 用 ,用 户 注 
册 是 访问 者 变 成 用 户 或 者 会 员 必 经 的 途径 。 

根据 网 站 获取 访问 者 信息 的 不 同 , 注 册 表 单 各 不 相同 。 常 见 的 注册 表单 主要 由 文本 输 
入 框 密 码 输入 框 . 复 选 框 提交 按钮 、 单 选 按钮 .菜单 等 元 素 构 成 ,注册 表单 如 图 5-25 所 示 。 

通过 注册 表单 能 够 获取 访问 者 的 基本 信息 。 在 访问 者 注册 过 程 中 ,有 很 多 访问 者 一 见 
到 注册 表单 就 会 立刻 点 击 浏览 器 上 的 后 退 按钮 。 这 里 面 原因 有 很 多 ,例如 表单 篇 幅 长 .不 友 
好 不 值得 信任 。 

这 种 情况 每 发 生 一 次 ,就 失掉 了 一 个 潜在 用 户 。 怎 样 设计 表单 才能 让 更 多 的 访问 者 愿 
意 完成 注册 ,这 是 设计 师 必 须 面 对 的 挑战 ,因此 注册 表单 要 从 访问 者 的 角度 来 进行 设计 。 

1 我 能 得 到 什么 

网 页 设计 师 首先 想到 的 往往 是 一 些 相关 操作 的 细节 问题 ,包括 按钮 的 颜色 .标题 的 字 
号 ,对比度 、 对 其 方式 ,等 等 。 但 最 最 首要 的 问题 是 作为 网 站 的 访问 者 ,为 什么 要 填写 表单 ? 
能 得 到 什么 ? 


欢迎 注册 TOM 账 号 ! 
请 设置 您 的 帐号 名 称 
用 户 名 pr 


6.18 个 字符 ， 仅 支持 字母 、 数 字 及 “.”、”-”、”_”,， 不 能 全 部 数字 可 下 姑 绒 


5-18 位 字符 字母、 数字、 符号) ， 区 分 大 小 写 


安全 信息 设置 以 下 信息 对 人 护 您 的 账号 安全 极为 重要 ， 请 慎重 填写 并 牢记 


符号 ) ， 区 分 大 小 写 ， 密 保 邮 入 不 为 当前 注册 邮箱 


有 洛 不 青 [的 一 6 


贺 我 已 阅读 并 搞 碗 “ 服 郑 订 枚 ” 


* 输入 验证 码 


图 5-25 注册 TOM 用 户 


访问 者 不 会 简单 的 因为 你 提出 了 相关 要 求 而 把 自己 的 个 人 信息 透露 给 你 。 你 要 让 他 们 
看 到 这 样 做 的 好 处 在 哪里 。 不 妨 把 这 件 事 看 作 一 种 交易 ,你 的 访问 者 提供 他 们 的 名 字 与 邮 
箱 地 址 ,从 而 换取 到 一 些 他 们 需要 的 东西 ,例如 享受 服务 .免费 试用 软件 .下 载 PDF 文档 等 。 

除了 让 浏览 者 知道 他 们 能 得 到 什么 东西 以 外 ,最 好 还 能 告诉 他 们 这 东西 为 什么 是 他 们 
所 需要 的 。 要 聚焦 在 产品 的 价值 上 ,如 果 你 能 用 最 简单 的 介绍 文字 描述 出 你 的 产品 能 帮 用 
户 解决 怎样 的 问题 ,唤起 他 们 的 共鸣 ,那么 即使 表单 本 身 稍微 复杂 些 , 他 们 也 会 愿意 完成 填 
写 ; 否 则 ,字段 最 少 的 表单 也 不 会 引起 他 们 的 兴趣 。 


2 怎样 使 我 相信 

当 访 问 者 第 一 次 访问 你 的 网 站 或 接触 你 的 产品 时 ,他 们 确实 没什么 理由 一 下 子 产生 信 
任 。 不 妨 试 着 展示 一 些 具有 公共 效应 的 “证 据 ”, 例 如 相关 媒体 报道 .来自 现 有 用 户 的 赞许 ， 
以 及 任何 可 以 鼓舞 访问 者 对 产品 产生 积极 态度 的 元 素 。 

男 外 一 种 很 有 效 的 “证 据 ” 就 是 将 所 有 报道 过 你 家 产品 的 知名 媒体 的 Logo 陈列 在 页 面 
中 ,当然 前 提 是 必须 有 相关 的 报道 真实 存在 。 这 些 具有 很 高 识别 效应 的 元 素 可 以 有 效 增强 
用 户 的 信赖 感 。 

3 用 我 的 信息 做 些 什么 

在 为 访问 者 提供 积极 引导 的 同时 ,还 要 想 办 法 避免 掉 那 些 负面 因素 。 访 问 者 在 填写 表 
单 时 的 最 大 顾虑 就 是 信息 被 网 站 方 收集 之 后 的 用 途 。 用 户 不 会 希望 收 到 垃圾 邮件 ,更 不 愿 
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意 自己 的 个 人 信息 被 传播 出 去 。 如 果 你 确实 运营 着 一 个 值得 信赖 的 产品 ,那么 不 妨 直接 让 
用 户 知道 你 不 会 把 他 们 的 信息 贩卖 出 去 或 是 向 他 们 发 送 垃 圾 邮件 。 

4 会 占用 我 多 少时 间 

如 果 可 以 让 访问 者 明确 地 了 解 到 产品 价值 ,唤起 他 们 的 需求 共鸣 ,得 到 他 们 的 信任 , 那 
么 表单 的 长 度 将 不 会 成 为 影响 转化 率 的 最 主要 因素 ,但 这 并 不 意味 着 我 们 不 需要 对 表单 进 
行 简化 ,毕竟 他 们 的 时 间 和 耐心 是 非常 有 限 的 。 


342 制作 账户 注册 页 面 


如 图 5-26 所 示 ,从 图 中 不 难看 出 ,注册 表单 主要 由 文本 输入 框 、 密 码 输入 框 , 单 选 按钮 、 
菜单 、 复 选 框 和 提交 按钮 构成 ,获取 用 户 的 上 昵称、 密码、 性别、 生日、 所在地、 是 否 开 通 QQ 空 
间 等 信息 。 


注册 账号 
昵称 昵称 不 可 以 为 空 
密码 长 度 为 6-16 个 字符 
确认 密码 
性 别 回 男 加 女 
生日 公历 加 | 年 国 | 月 加 日 虽 


所 在 地 “中国 国 | 吉林 加 | 长 春 及 


贺 同时 开通 QQ 空间 
贺 我 已 阅读 并 同意 相关 服务 条 款 和 隐私 政策 


立即 注册 


图 5-26 注册 账号 


【任务 实施 】 


案例 制作 注册 账号 页 面 。 
任务 1 插入 div 标签 。 
步 又 1 新 建 网 页 文件 ,插入 div 标签 ,并 命名 为 reg。 
<div id "reg> 
此 处 显示 ia "zeg" 的 内 容 
</div> 


步骤 2 设置 通配符 (* ) 样 式 , 清 除 所 有 标签 的 边 距 和 补 白 。 


| 
margin: Opx; 
Fadding: Opzx; 


步骤 3 设置 div 标签 宽 、 左 边 距 和 字号 。 


#reg ff 
midth: 500px; 
margin left: 100px; 
font- size: 13px; 
} 
任务 2 添加 注册 标题 。 
添加 注册 标题 ,并 设置 颜色 、 字 体 、 字 号 、 下 边框 、 下 边 距 、 左 补 白 和 下 补 白 ,页 面 浏 览 效 
果 如 图 5-27 所 示 。 
<h3> 注 册 账 号 < /h3> 
m31{ 
Color: # 999; 
Pedding- bottam: Spx; 


图 5-27 添加 注册 标题 


任务 3 插入 表单 。 
根据 图 5-26 所 示 插 入 表单 及 其 元 素 ,表单 及 其 元 素 的 基本 属性 如 表 5-11 所 示 。 


表 5-11 注册 表单 及 其 元 素 说 明 


名 称 类 型 初 始 值 含 后 
forml form < 表单 

nick input/text A 文本 输入 框 
pwd input/password Ee 密码 输入 框 
pwd_again input/password Se 文本 输入 框 
sex input/radio 男 ( 默 认 ) 单 选 按钮 
sex input/radio 女 单 选 按钮 
calendar select 公历 菜单 

year select 年 菜单 

month select 月 菜单 

day select 日 菜单 
country select 中 国 菜单 
province select 吉林 菜单 


| sy 


pz 


续 表 
名 称 类 型 初 始 值 会 贤 
city select 长 春 菜单 
qzone input/checkbox 1 复 选 框 
agree input/checkbox 1 复 选 框 
btn submit 立即 注册 提交 按钮 
相关 代码 如 下 : 


< fom id= "forml" name= "forml" method- "post" actionr= "> 
<p> < label class= "lab" for= "nick> 了 昵称 < /label> 
< input name= "nick" type= "text" class= "ipt" id= "nick" /> 
< span class= "sp _ red 昵称 不 可 以 为 空 < /spar>< /p> 
<p> < label class= "lab" for= "pwd"> 密 码 < /label> 
< input name= "pwd" type= "password" class= "ipt" id- "pwd" /> 
< span class= "sp_red"> 长 度 为 6- 16 个 字符 < /span> < /p> 
<p>< label class= "lab" for= "pwd_again"> 确 认 密 码 < /label> 
< input name= "pwd_again" type= "password" class= "ipt" id- "pwd again" /> 
< 人 > 
<E><1label class= "lab"> 性 别 < /label> 
< label for= "sex"> < input name= "sex" typer "radio" jd "sex" value= " 男 " dhecked= "checked" /> 
男 </label> 
< label for= "aex> < input typer "radio" nene= "sex" id "sex" value= " 妈 " /> 
女 </label></p> 
<p><label class="lab"> 生 日 < /label> 
< select name= "calendar" id- "calendar"> 
<cption> 公 历 < /cption> 
<cption> 农 历 < /cption> 
</select> 
< select name= "year" id "year"> 
<cption> 年 < /option> 
</select> 
< select name= "month" id= "month"> 
<cption> 月 < /cption> 
</select> 
< select name= "day" id "day”> 
cption> 日 < /cption> 
< /select> 
</e> 
<E><1label class= "lab"> 所 在 地 < /label> 
< select name= "country" id= "country"> 
<caption> 中 国 < /cption> 
</select> 
< select name= "provincen id= "provincem> 
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<cption> 吉 林 < /aption> 
</select> 
< select neme= "city" id "city> 
<cption> 长 春 < /apticn> 
</select> 
< 他 
<P class= "left pad> 
< label for= "qzone"> < input name= "qzonen type= "checkbox" id "ponen value= 
"1" checked= "checked" /> 
同时 开通 QQ 空间 < /label>< /p> 
<P class= "left pad"> 
< label for= "agree"> < input name= "agree" type= "checkbox" jd "agree" value= 
"1" checked= "checked" /> 
我 已 阅读 并 同意 相关 服务 条 款 和 隐私 政策 < /1abel> < /p> 
<p class= "left pad"> 
< input name= "btn" type= "submit" id= "btn" value= "立即 注册 " /> 
< 人 
</form> 


浏览 页 面 ,如 图 5-28 所 示 。 


注册 账号 
昵称 昵称 不 可 以 为 空 
密码 长 度 为 6-16 个 字符 
A 

2 回国 
i 中 国 El 吉林 “图 | 长春 四 | 
回 同时 开通 QQ: 


RA 


图 5-28 插入 表单 后 的 浏览 效果 


任务 4 设置 表单 样式 。 
步骤 1 设置 行 。 即 设置 p 标 签 上 、 下 补办 和 行 高 。 


pl 
Paddingr top: Apx; 
Padding- bottam: 2px; 
line~ height: 30px; 

} 


步骤 2 设置 标签 对 齐 方式 。 注 册 表 单 左 侧 标签 采用 右 对 齐 方式 。 


.lab{ 
vertical- align: middley; 
height: 30px; 
width: 80px; 
display: inline block; 
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text- align: right; 
padding_ right: 10px; 
} 


浏览 页 面 ,如 图 5-29 所 示 。 


注册 账号 
最 称 || ”也 称 不 可 以 为 空 
密码 | 长 度 为 6-16 个 字符 
确认 密码 | 
性 别 | 回 男 日 女 
生日 | [公历 辆 | 年 回 | 月 国 | 日 国 
所 在 地 | [中 国 国 ] [吉林 “图 [长 者 国 


同时 开通 QQ 空间 
国 我 已 阅读 并 同意 相关 服务 条 款 和 隐私 政策 
区 即 注册 


图 5-29 标签 对 齐 后 浏览 效果 
步骤 3 设置 文本 输入 框 样式 。 设 置 文本 框 宽 ,高 .边框 和 左 补 白 。 


"ipt { 
height: 28px; 
width: 200pxy 
border: lpx solid # CC 
Padding- left: 10px; 
' 


浏览 页 面 ,如 图 5-30 所 示 。 


注册 账号 
昵称 也 称 不 可 以 为 空 
密码 | 长 度 为 6-16 个 字符 
确认 密码 
性 别 国 男 目 女 


生日 [公历 国 [ 年 国 月 国 卓 国 
所 在 地 [中 国人 加] [吉林 “加 [长春 国 
同时 开通 QQ 空间 
国 我 已 阅读 并 同意 相关 服务 条 款 和 隐私 政策 


区 可 注册 


图 5-30 文本 框 添加 样式 后 浏览 效果 


步骤 4 设置 菜单 样式 。 对 宽 ,高 .边框 进行 设置 。 


Select { 

height: 28px; 

width: 80px; 

border: lpx solid #00C; 
} 


浏览 页 面 ,如 图 5-31 所 示 。 
注册 账号 


昵称 昵称 不 可 以 为 空 

密码 长 度 为 6-16 个 字符 
确认 密码 

性 别 国 男 目 女 


生日 | 公历 


年 ”国有 可 日 


吉林 ”回春 ” 回 


qa] 区 ] 


所 在 地 | 中 国 
国 同时 开通 QQ 空间 
国 我 已 阅读 并 同意 相关 服务 条 款 和 隐私 政策 


图 5-31 菜单 添加 样式 后 浏览 效果 


步骤 5 设置 复 选 框 和 按钮 样式 。 对 复 选 框 和 按钮 所 在 行 添加 左 补 白 ,对 “立即 注册 ” 
按钮 的 字号 ,字体 . 字 颜 色 .背景 颜色 宽 、 高 .边框 和 上 边 距 进行 设置 。 


“left pad { 
Padding- left: 92px7 

} 

#btn { 
font- size: 2lpx; 
font- weight: bold; 
Color: #FFEF; 
background- color: # 06F7 
height: 40px; 
width: 150px; 
border: lpx solid # 06F; 
mrgin top: 10px; 

} 


浏览 页 面 ,如 图 5-32 所 示 。 
步骤 6 设置 提示 信息 。 设置 提 示 信 息 文字 颜色 为 红色 。 
mg red { 


Color: #F00; 
} 
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128] } 


注册 账号 


昵称 


昵称 不 可 以 为 空 


长 度 为 6-16 个 字符 


生日 | 公历 | 国 年 ~ 


所 在 地 中 国 站 | 吉林 部 


长 春 


国 同 时 开通 QQ 空间 


5-32 ” 复 选 框 和 按钮 添加 样式 后 浏览 效果 


贺 我 已 阅读 并 同意 相关 服务 条 款 和 隐私 政策 


5.5 任务 拓展 


任务 ”制作 网 站 建议 表单 页 面 ,如 图 5-33 所 示 。 


昵称 * 


上 传 图 片 浏览 


类 别 * 加 信息 分 类 建议 器 区 域 划分 建议 目 创意 点 子 目 其 他 建议 


5-33 ”网 站 建议 表单 


任务 描述 : 网 站 建议 表单 页 面 是 用 户 对 网 站 建设 提出 合理 化 建议 的 平台 。 网 站 建设 对 


于 交互 式 用 户 体验 的 要 求 越 来 越 高 ,网 站 建设 也 应 该 遵循 交互 式 网 站 建设 和 交互 式 月 


日 户 体 


验 的 理念 ,在 网 站 建设 中 不 断 加 入 交互 式 网 站 效果 ,让 网 站 能 够 为 浏览 者 提供 更 加 有 用 和 更 


加 舒服 的 用 户 体验 。 


任务 要 求 : 不 借助 图 像 , 使 用 CSS 实现 所 有 元 素 的 样式 设计 。 


5.6 本 章 小 结 


本 章 主要 讲解 了 表单 的 概念 ,如 何 创 建 表单 ,常见 的 表单 页 面 布局 方式 ;详细 地 介绍 了 
搜索 表单 、 跟 帖 评论 表单 ,注册 表单 及 其 作用 和 制作 方法 。 通 过 本 章 学 习 , 要 求 读者 掌握 表 


第 5 章 表 间 页 面 区》 
“fy 
单 常 用 元 素 的 基本 属性 和 使 用 方法 、 表 单 布局 方式 ,具备 表单 页 面 的 综合 设计 能 力 。 Ne 


习 题 
(1) 参考 图 5-34 所 示 制 作用 户 登录 表单 。 要 求 : 页 面 设 计 美观 ,布局 合理 ,表单 设计 及 


命名 规范 。 
(2) 根据 图 5-35 所 示 制 作 网 上 调查 表单 页 面 。 


NS 
®3 
发 现 频 首 
Bi 二 维 码 安全 登录 
用 广 名 /邮箱 /手机 号 /门店 会 员 卡号 
调查 
| 业 隆 多 被 交易 至 小 牛 ， 对 此 您 怎么 看? 
忘记 密码 | 免费 注册 国 会 员 卡 首次 登录 


图 5-34 社区 登录 表单 图 5-35 ”网 上 调查 
(3) 根据 图 5-36 所 示 制 作 百度 账号 注册 表单 。 


局 区 加 未 | ;En 下 放 ws 


验 iEB QVXG s+ 


贺 我 已 阅读 并 接受 《百度 用 户 协 议 办 


图 5-36 注册 表单 


框架 网 页 设计 Se 


从 网 页 布局 的 角度 来 说 ,表格 是 传统 的 布局 技术 ,DIV 十 CSS 是 当前 主流 的 布局 ,但 是 
这 二 者 都 不 能 起 到 分 割 浏览 器 的 作用 ,而 框架 却 可 以 实现 在 不 同 的 窗口 浏览 不 同 的 HTML 
页 面 , 使 用 框架 可 以 轻松 实现 导航 和 网 站 页 面 风格 的 统一 。 


本 齐 要 点 


6.1 关于 框架 网 页 


框架 技术 是 一 种 在 一 个 页 面 中 显示 多 个 网 页 的 技术 ,通过 超 链 接 可 以 使 框架 之 间 建 立 
内 容 之 间 的 联系 ,从 而 实现 页 面 导航 的 功能 。 通 过 使 用 框架 ,可 以 在 同一 个 浏览 器 窗口 中 显 
示 不 止 一 个 页 面 。 每 份 HTML 文档 称 为 一 个 框架 ,每 个 框架 都 独立 于 其 他 的 框架 。 框 架 
的 基础 结构 分 为 框架 集 和 框架 ,框架 集中 包含 许多 框架 。 

基本 语法 ， 


<html> 
<head> 
<title> 关 于 框架 集 < /title> 
< /head> 


</htm> 


语法 说 明 : 框架 集 (frameset) 可 以 在 一 个 窗口 中 定义 一 组 框架 结构 ,并 设置 其 相关 的 属 
性 ,属性 值 如 表 6-1 所 示 。 


第 6 章 “ 枉 荣 同 页 这 二， 


表 6-1 框架 集 属性 


属 性 值 描述 

border pixels 设置 边框 粗细 

bordercolor rgb 设置 边框 颜色 

frameborder 指定 是 否 显示 边框 , 0 代表 不 显示 ,1 代表 显示 边框 

le Ee 定义 框架 集中 列 的 数目 和 尺寸 。 用 “像素 数 ” 和 “%” 分 割 左右 窗口 ，“* ” 表 
> 示 剩余 部 分 

ow 936% | 定义 框架 集中 行 的 数目 和 尺寸 。 用 "像素 数 "和 "96" 分 制 上 下 窗口 “x " 表 


示 剩 余部 分 


framespacing | pixels 表示 框架 与 框架 间 的 保留 空白 的 距离 
noresize yes/no | 设 定 框架 不 能 够 调节 ,只 要 设 定 了 前 面 的 ,后 面 的 将 继承 
注 : 在 框架 集 网 页 中 没有 二 body> 标 签 ,以 frameset 替代 body 标记 ,利用 frame 定义 框架 。 


6.2 制作 导航 框架 页 


621 关于 导航 框架 


导航 框架 是 框架 集 最 常用 的 方式 。 通 过 单 击 导 航 框架 中 的 超 链 接 , 可 以 在 内 容 显 示 框 
架 页 中 显示 不 同 的 网 页 。 导 航 框 架 一 般 位 于 页 面 顶部 或 页 面 左 侧 区 域 ,内 容 显示 框架 一 般 
位 于 页 面 的 底部 区 域 或 右 侧 区 域 ,如 下 图 6-1 所 示 。 当 然 ,根据 具体 情况 也 可 灵活 设计 导航 
框架 的 位 置 。 


图 6-1 常见 导航 框图 


622 制作 导航 框架 
【知识 基础 】 


1 关于 框架 集 的 水 平分 割 
所 谓 框架 集 的 水 平分 割 ,就 是 利用 框架 集 frameset 的 rows 属性 来 实现 水 平分 割 框架 


Tm sy 


3 


集 窗口 。 在 这 种 情况 下 ,rows 表示 分 割 子 窗口 的 高 度 , 至 少 有 两 个 或 两 个 以 上 的 属性 值 , 属 
性 值 之 间 用 逗号 分 隔 ,属性 值 的 个 数 就 是 框架 集中 的 框架 个 数 ,属性 值 单位 可 以 是 像素 ,也 
可 以 是 百分比 。 

下 列 是 将 框架 集 水 平分 割 成 2 个 窗口 的 标记 属性 值 写法 。 


< frameset rows= "20%, * "> < /frameset> 
< frameset rows= "20%,80%"> < /frameset> 
< frameset rows= "200, 600"> < /frameset> 
< frameset rows= "200, * ">< /frameset> 


下 列 是 将 框架 集 水 平分 割 成 3 个 窗口 的 标记 属性 值 写法 。 


< frameset rows= "20%,30%, * "> < /frameset> 
< frameset rows= "20%,50%,30%"> < /frameset> 
< frameset rows= "200, 300, * "> < /frameset> 


2 关于 框架 集 的 垂直 分 割 

所 谓 框架 集 的 垂直 分 割 ,就 是 利用 框架 集 frameset 的 cols 属性 来 实现 垂直 分 割 框架 集 窗 
口 。 其 中 rows 表示 分 割 子 窗口 的 宽度 ,至 少 有 两 个 或 两 个 以 上 的 属性 值 , 属 性 值 之 间 用 逗号 
分 隔 ,属性 值 的 个 数 就 是 框架 集中 的 框架 个 数 , 属 性 值 单 位 可 以 是 像素 ,也 可 以 是 百分比 。 

下 列 是 将 框架 集 垂 直 分 割 成 2 个 窗口 的 标记 属性 值 写法 。 

< frameset cols= "20%, * "> < /frameset> 

< frameset cols ="20%,80%"> < /frameset> 

< frameset cols = "200,600"> < /frameset> 

< frameset cols ="200, * "> < /frameset> 


下 列 是 将 框架 集 垂 直 分 割 成 3 个 窗口 的 标记 属性 值 写法 。 
< frameset cols ="20%,30%, * "> < /frameset> 


< frameset cols = "20%,50%,30%"> < /frameset> 
< frameset cols = "200, 300, * "> < /frameset> 


【任务 实施 】 


案例 ”诗词 欣赏 导航 站 制作 。 

任务 1 建立 frame 导航 站 和 frames. html 页 。 

步骤 1 建立 站 点 frame, 并 添加 images 图 片 文件 夹 .frames. html 页 。 

步骤 2 打开 frames. html 文件 ,设置 框架 集 frameset 的 结构 ,采用 水 平分 割 方式 , 包 
含 2 个 框架 页 (顶端 框架 topFrame 和 内 容 框架 mainFrame) , 源 代码 如 下 : 


<htm > 
<head> 
<title> 导 航 框架 < /title> 
< /head> 
< frameset rows= "80, * " border= "0" framsborder= "no" framespacing= "0"> 
< frame srcr "top.html" name= topFrame scrolling- "no" noresizer "noresize"/> 


< frame src= "main.html" name=mainFyame scrolling= "no" noresize= "noresize" /> 
</htnl> 


任务 2 创建 top. html 页 。 

步骤 1 在 frame 站 点 中 添加 top. html 并 打开 ,在 body 标签 中 添加 HTML 标签 , 添 
加 文本 导航 : 子夜 秋 歌 .将 进 酒 、 静 夜 思 、 绝 句 ,利用 无 序列 表 制 作 横行 导航 , 源 代码 如 下 
所 示 。 


<body> 
<div id "oon"> 
<ul> 
<Jli><ahref- "main.html" target= "mainFrame"> 子 夜 秋 歌 < /a>< /li> 
< li> <a href= "mainl.html" target= "mainFrame"> 将 进 酒 < /a>< /1i> 
< 1i><a href= "main2.html" target= "mainFrame"> 静 夜 思 < /a>< /li> 
< li><a href= "main3.html" target= "mainFrame"> 绝 句 < /a>< /li 
>< 1i> <a href= "main4.html" target= "mainFrame"> 从 军 行 < /a>< /li> 
</u> 
</div> 
< /body> 


步骤 2 在 head 标签 对 之 间 添 加 相应 内 部 css, 利 用 样式 表 实 现 横向 导航 的 制作 。 


< style type= "text/css"> 
| 
margin:Opx; 
padding:Opx; 
border:Opx; 


1 人 人 一 HTML Csrioaey 


134 ， 
A text— align: oanter; 
人 
ul li a:linkul li a:visited{ 
Color:# 000; 
font- femily:' 听 软 雅 黑 "; 
font— size:16px; 
font— weight:bold; 
text— decoration:none; 
} 
ul li a:hover{ 
color:# FOO; 
} 
< /style> 


任务 3 创建 main. html 页 。 
步骤 1 新 建 main. html 并 打开 ,在 body 标签 中 添加 HTML 标签 , 源 代码 如 下 所 示 。 


<body> 
<pre> 
是) 李白 


长 安 一 片 月 ， 
万 户 的 衣 声 。 
秋风 吹 不 尽 ， 
总 是 玉 关 情 。 
何 日 平 胡 虏 ， 
良 人 罢 远 征 。 
< /pre> 
< /body> 


步骤 2 在 head 标签 之 间 添 加 CSS 样式 ,设置 相应 用 的 显示 模式 , 源 代码 如 下 所 示 。 


< style type= "text/css"> 
body { 

background image: url (images/bj.gif); 
} 
pre { 

font- family:" 华 文 行 楷 "; 

font— size: 28px; 

color:# C90; 

line~ height:30px; 

text- align: oanter; 
} 
< /style> 


步骤 3 重复 上 面 步骤 ,完成 内 容 框架 中 的 显示 页 mainl. html、main2. html、main3. html 
的 制作 。 


EC 


了 ms 
任务 4 在 浏览 器 中 测试 效果 ,如 图 6-2 所 示 。 eth 


子 胡 秽 家、 净 浊 西 。 剖 认 提名 。 从 硅 行 


家 人 黑 迅 征 。 


图 6-2 诗词 欣赏 导航 站 示意 图 


6.3 制作 综合 框架 页 


631 关于 框架 的 手套 


在 一 个 框架 集中 放 入 新 的 框架 集 称 为 框架 的 戏 套 。 使 用 框架 谋 套 可 以 在 一 个 网 页 中 添 
加 建立 多 个 框架 集 , 也 就 是 说 一 个 框架 集 文件 可 以 包含 多 个 说 套 的 框架 集 。 如 果 在 一 组 框 
架 里 ,不 同行 或 不 同 列 中 有 不 同 数目 的 框架 , 则 要 求 使 用 说 套 的 框架 集 。 

大 多 数 使 用 框架 的 Web 页 实际 上 都 使 用 嵌 套 的 框架 ,如 图 6-3 所 示 , 儿 种 常见 的 框架 
能 套 结构 示意 图 。 一 般 来 说 导航 框架 处 于 上 部 和 左 侧 区 域 , 所 占 区 域 较 少 ;内 容 区 域 一 般 占 
据 中 间 位 置 ,所 占 的 面积 较 大 。 


6-3 框架 工 套 示意 图 


632 制作 综合 框架 


【知识 基础 】 
所 谓 综合 框架 网 页 ,从 实现 技术 上 来 说 就 是 利用 框架 集 柑 套 来 实现 的 ,下 面 描述 了 一 个 


Tm sy 


Ey 


框架 集 右 侧 嵌 套 的 例子 ,其 框架 集 语 法 结构 如 下 : 


< frameset rows= "200px 800px"> 
<fram .> 


< frameset cols- "25%, 1% "> 
<frame .> 
<frame .> 

< /frameset> 


各 种 框架 集 网 页 的 实现 就 是 一 种 灵活 组 合 的 结果 。 
【任务 实施 】 


案例 ”友情 导航 框架 网 页 制作 。 

任务 1 建立 mixframeset 网 站 和 frameset. html 框架 集 。 

步骤 1 建立 站 点 mixframeset, 并 添加 images 图 片 文件 夹 .frameset. html 页 。 

步骤 2 打开 frameset. html 文件 ,设置 框架 集 frameset 的 结构 ,采用 水 平分 割 方 式 , 包 
含 2 个 框架 页 (顶端 框架 topFrame 和 内 容 框架 mainFrame) , 源 代码 如 下 所 示 。 


<html > 
<head> 
<title> 混 合 框架 集 < /title> 
< /head> 
< frameset rows= "150px, * " cols= "x " frameborder= "no" > 
< frame name= "topFErame" src= "top.html" scrolling= "no"> 
< frameset rows="* " 00]s= "211px, * " frameborder= "no"> 
< frame name= "leftFrame" src= "left.html" scrolling= "no" noresize= 
"noresize"> 
< frame name= "rightFrame" src= "right.html" noresize= "noresize"> 
< /frameset> 
< /frameset> 
</htm> 
任务 2 创建 top. html 页 。 
步骤 1 在 mixframeset 站 点 中 添加 top. html 并 打开 ,在 body 标签 中 添加 HTML 标 
签 ,添加 顶部 图 片 。 
<body> 
<div id "top™> 
< img srcr "imeges/1.jpg" 人 > 
</div> 
< /body> 
步骤 2 在 top. html 网 页 文件 的 head 标签 对 之 间 添 加 相应 内 部 CSS ,设置 图 片 的 位 置 
与 样式 表 。 


< style type= "text/css"> 


| 
Padding:Opx; 
margin:Opx; 
border:Opx; 

i 

body{ 
text- align:oenter; 
background- color:# 39C7 

} 

#tcp { 
margin- left:auto; 
margin- right:autoy 
height:143px; 
width:100%; 
background- image:url (images/2.jpg); 
background- repeat :repeat— x; 
text- align:left; 

外 

#top img{ 
width:1222px; 
height:140px; 

} 

</style> 


任务 3 创建 left. html 页 。 
步骤 1 在 mixframeset 站 点 中 添加 导航 网 页 left. html 并 打开 ,在 body 标签 中 利用 ul 
标签 建立 纵向 导航 栏 , 源 代码 如 下 所 示 。 


<body> 
<div id- "left"> 
<ul> 
<1i><ahref- "httpb://www.baida.oomr' target— "rightFrare"> 百度 < /a>< /li> 
< li> <a href- "http://www.schu.om' target— "rightFrame"> 新 浪 < /a>< /li> 
< li> <a href- "http://www.sina.om.an" target— "rightFrare"> 搜 狐 /a>< /li> 
</aul> 
</div> 
< /body> 


步骤 2 在 left. html 网 页 的 head 标签 对 之 间 添 加 相应 内 部 CSS, 设 置 导航 栏 的 样式 表 。 


< style type= "text/css"> 
es 
padding: Opx; 
margin:Opx; 
border:Opx; 


TM CSS:jOey 


width: 150px; 
text— aligqn:oenter; 
background- color:# 09F; 
} 
#1eft ul{ 
list— style- type:none; 
} 
# left ul li{ 
width:80px; 
height:40px; 
#1eft ul li a:link,# left ul li a:visited{ 
Color:# FFF; 
font- family:" 微 软 雅 黑 " 
font- size:14rx7 
text- decoration:none; 
二 
# left ul li a:hover{ 
color:# FCO;} 
< /style> 


任务 4 创建 right. html 页 。 
步骤 1 在 mixframeset 站 点 中 添加 导航 网 页 right. html 并 打开 ,在 body 标签 中 利用 
ul 标签 建立 纵向 导航 栏 , 源 代码 如 下 所 示 。 


<body> 
<div id- "right"> 
img src= "images/weloame.gif" /> 
</div> 
< /body> 
步骤 2 在 left.html 网 页 的 head 标签 对 之 间 添 加 相应 内 部 CSS ,设置 图 片 样式 表 。 
< style typer "text/css"> 
产 直 
Padding:07 


margin:0; 
border:Opx; 


< /style> 


任务 5 在 浏览 器 中 测试 效果 ,如 图 6-4 所 示 。 


Ee =TEE Modaem 


图 6-4 友情 导航 框架 网 页 示意 图 


6.4 制作 浮动 框架 页 


641 关于 浮动 框架 

所 谓 浮动 框架 ,是 网 页 中 的 一 种 特殊 框架 ,是 在 浏览 器 窗口 中 利用 iframe 标记 嵌入 另 
一 个 子 窗口 。 要 特别 注意 iframe 标记 必须 在 body 标记 中 使 用 ,不 能 插入 frameset 标记 中 。 
表 6-2 显示 iframe 的 相关 属性 值 。 


表 6-2 iframe 属性 


属 性 值 描述 

frameborder , 是 否 显 示 框 架 周 围 的 边框 
height 和 iframe 的 高 度 
marginheight pixels 定义 iframe 的 顶部 和 底部 的 边 距 
marginwidth pixels 定义 iframe 的 左 侧 和 右 侧 的 边 距 
name frame_name 规定 iframe 的 名 称 

yes 
scrolling no 是 否 在 iframe 中 显示 滚动 条 

auto 
Src URL 在 iframe 中 显示 的 文档 的 URL 
width 定义 iframe 的 宽度 
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642 制作 浮动 框架 
【知识 基础 】 


iframe 标签 是 比较 新 的 标签 ,从 它 的 参数 可 以 看 出 ,与 普通 的 html 标签 区 别 不 大 。 前 
面 的 章节 学 习 了 利用 frame( 框 架 ) 布 局 网 页 的 技术 。 实 际 上 ,iframe 和 frame 功能 类 似 。 不 
同 的 是 ,iframe 是 一 个 浮动 框架 ,可 以 把 iframe 布置 在 网 页 中 的 任何 位 置 ,这 种 极 大 的 自由 
度 可 以 给 网 页 设计 带 来 很 大 的 灵活 性 ,所 以 掌握 这 个 技术 是 非常 必要 的 。 下 面 描述 了 一 个 
浮动 框架 的 语法 结构 。 


<div class= "main"> 
< iframe src= "word.html" ..> 
< /iframe> 

</div> 


【任务 实施 】 


案例 长 职 院 评估 网 站 子 页 制作 。 

任务 1 建立 iframe 网 站 和 iframe. html 页 。 

步骤 1 建立 站 点 iframe, 并 添加 images 图 片 文件 夹 iframe. html 页 。 

步骤 2 ”打开 iframe. html 文件 ,制作 该 页 面 的 HTML 主体 结构 ,并 明确 放置 浮动 框架 
的 区 域 和 位 置 , 源 代码 如 下 所 示 。 


<html> 
<head> 
<title> 浮 动 框架 网 页 < /title> 
< /head> 
<body> 
<div class= "com"> 
<div id "top™> 
< img srcr "images/top.jpg" /> 
</div> 
<div class= "main"> 
</div> 
<div class= "footer"><p> 版 权 所 有 : 长 春 职业 技术 学 院 信息 技术 分 院 | 技术 支持 : 蓝 星 
工作 室 | 学 院 地 址 : 长 春 市 卫星 路 3278 号 [130033]< /p> 
</div> 
</div> 
< /body> 
< /hinl> 


步骤 3 在 iframe. html 文 件 中 ,main 区 域 用 于 放置 浮动 框架 页 ,设置 main 区 域 宽 、 
高 ,滚动 条 ,利用 src 指定 要 嵌入 浮动 框架 的 网 页 名 称 (word. html) , 源 代码 如 下 所 示 。 


EC 


< iframe border= 2 namer iframename src= "word.html" width= 900 height= 630 scrolling= yes > 
< /iframe> 


步骤 4 在 iframe. html 文件 中 head 标签 中 设置 CSS 样式 , 源 代码 如 下 所 示 。 


< style typer "text/css"> 
*{ 
margin:Opx; 
Fadding:opee 
border:0pz7 
} 
.conf 
width:900px; 
height:800px; 
background- image:url (images/bg_01_01.jpg); 
margin:Opx auto; 
外 
#top{ 
width:900px; 
height:181px; 
} 
“main{ 
width:900px; 
height:630px; 
} 
.footer{ 
background- image:url (images/footer bg 01 06.jpg); 
background- repeat:no- repeat; 
background- color:# FEC; 
height :45px; 
width:900px; 
font— size:l2px; 
Color:# FEE; 
font— weight:bold; 
line height:40px; 
margin- top: Sx; 
} 
< /style> 


任务 2 创建 word. html 页 。 

步骤 1 在 word. html 文件 中 对 所 要 显示 的 文本 信息 进行 版 面 设计 ,合理 运用 标题 、 段 
落 等 标签 以 保证 页 面 设计 美观 。 

步骤 2 在 head 标签 对 之 间 ,编写 相应 的 CSS 样式 表 用 来 控制 文本 的 显示 效果 。 

任务 3 在 浏览 器 中 测试 效果 ,如 图 6-5 所 示 。 
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决定 开展 第 三 届 * 说 专 
验 、 展 现 教学 设计 特色 


册 "、“ 说 课程 “说 教学 设计 "竞赛 活动 ， 以 
法 成 以 赛 促 研 、 以 赛 促 建 、 以 赛 促 改 的 目的 。 现 将 有 关 事 宜 通知 如 下 。 
广 、 竟 赛 形式 及 时 间 安 排 

借 赛 采取 教学 单位 初赛 和 学 院 决赛 的 方式 进行 ， 

上 . 初 月 20 日 至 5 月 12 日 各 教学 单位 组 织 相关 专业 及 教师 开展 
活动 ， 评 选 出 相应 级 别 和 名 次 ， 并 推荐 ?个 专业 、3 门 课程 和 4 个 教学 设计 《包括 2- 
设计 》 参 加 学 院 决 赛 。 

已 决 寓 ;5 月 14 日 全 天 学 陀 组 织 戎 阁 教 师 进行 集中 汇报 ， 并 分 别 评选 出 一 等 迫 2 个 ， 二 等 奖 3 个 ， 三 等 奖 若 干 。 
已 、 竞 赛 内 容 要 求 上 
I. 说 专业 ， 重 在 进行 专业 剖析 。 主 要 包括 专业 概况 、 近 五 年 (2000. 9- 至 今 ) 专业 建设 主要 成 效 、 重 点 是 人 才 培 养 
噶 式 、 课 程 件 系 、 课 程 建设 、 教 学 质量 监控 、 师 资 队 伍 、 实 训 基 地 、 校 企 合作 、 专 业 特色 、 存 在 的 问题 及 措施 及 必 
未 来 发 展 烟 划 等 内 容 (具体 要 求 可 依据 《长 春 职 业 技术 学 院 xxx 专 业 人 才 培 养 工 作 齐 析 报 告 》》。 汇 报时 间 为 | 
Po 分 钟 。 

中 说 课程 ， 主 要 包括 课程 定位 、 性 质 作用 、 教 学 内 容 、 教 学 资源 、 课 程 团 队 、 实 践 条 件 、 教 学 方法 与 手段 、 考 核 
评价 、 存 在 的 问题 及 措施 等 内 容 ， 重 点 是 教学 内 容 与 教学 实施 。 汇 报时 间 为 15 分 钟 ， 其 中 教学 内 容 与 教学 实施 汇 量 
眠 时 间 不 少 于 10 分 钟 。 

B. 说 教学 设计 : 包括 课程 整体 设计 和 教学 单元 设计 。 课 程 整体 设计 主要 包括 专业 人 才 培 养 模式 、 人 才 培 养 目 标 、 
课程 地 位 作用 、 教 学 模式 、 救 学 门 容 、 救 学 方法 与 手 申 ， 教 学 资源 、 课 程 特色 、 存 在 问题 与 拟 解决 措施 等 方面 。 

履 学 单元 设计 主要 为 专业 基础 课程 或 者 专业 课程 〈 基 础 部 不 作 此 要 求 ) 中 选择 某 一 单元 或 某 一 项 目 ， 主 要 包括 课 
阳 目 标 、 单 元 或 项 目 教学 目标 、 教 学 内 容 、 教 学 组 织 、 教 师 教学 方法 、 学 生 学 习 方法 、 考 核 评价 等 方面 ， 重 点 是 副 
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图 6-5 长 职 院 评估 站 子 页 示意 图 


6.5 任务 拓展 


任务 ”制作 框架 集 网 页 。 

任务 描述 : 该 框架 网 页 中 要 具有 导航 功能 、 主 体内 容 展示 功能 图 ,其 中 一 个 框架 网 页 必 
须 具 有 登录 窗口 功能 。 

任务 要 求 : 利用 框架 集 技 术 进 行 设计 与 制作 。 


6.6 本 章 小 结 


本 章 主要 介绍 了 关于 框架 网 页 的 相关 概念 和 创建 方法 ,在 此 基础 上 通过 导航 框架 、 混 合 
框架 、 浮 动 框架 三 大 案例 的 详细 制作 过 程 ,讲解 了 框架 网 页 的 制作 技术 。 通 过 本 章 的 学 习 ， 
可 以 掌握 框架 网 页 技术 基础 ,并 深入 体验 DIV 十 CSS 网 页 布局 技术 ,为 开发 框架 集 网 站 打 
下 良好 的 基础 。 
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习 题 
一 、 填空 题 
(1) 在 框架 集 网 页 创建 过 程 中 ,表示 框架 集 的 标签 是 ,表示 框架 的 标签 
是 
(2) 通过 使 用 ,可 以 在 同一 个 浏览 器 窗口 中 显示 多 个 页 面 。 


(3) 一 个 框架 有 可 见 边框 ,用 户 可 以 拖 动 边框 来 改变 它 的 大 小 。 为 了 避免 这 种 情况 发 
生 , 可 以 在 一 frame 之 标签 中 加 入 
二 、 选择 题 
(1) 要 创建 一 个 左右 框架 ,右边 框架 宽度 是 左边 框架 的 2 倍 ,以 下 HTML 语句 正确 的 
是 ( ) 
. <FRAMESET cols="*, 2x"> 
.FRAMESET cols="*, 3*"> 
. <FRAMESET rows="*, 2*"> 
D. <FRAMESET rows="*, 3*"> 
(2) 以 下 关于 框架 显示 效果 的 说 法 中 ,错误 的 是 ( )。 
A. 只 有 所 有 相 邻 框架 的 边框 都 设置 为 0, 才能 隐藏 边框 
B. 可 以 在 FRAME 标记 符 中 使 用 marginwidth 和 marginheight 属性 控制 框架 内 
容 与 框架 边框 之 间 的 距离 
C. 框架 的 边框 默认 可 以 移动 
D. 框架 默认 时 有 滚动 条 
(3) 要 创建 一 个 上 下 框架 ,上 边框 架 高 度 占 总 高 度 的 20%% ,下 边框 架 高 度 边框 架 占 
80% ,以 下 HTML 语句 正确 的 是 (  )。 
A. FRAMESET cols="20%, 80%"> 
B. <FRAMESET cols="20, 80"> 
C. <FRAMESET rows="20%, 80"> 
D. <FRAMESET rows="20, 80%"> 
(4) 在 HTML 语言 中 二 frame noresize 过 的 具体 含义 是 ( )。 
A. 个 别 框架 名 称 B. 定义 个 别 框架 
C. 不 可 改变 尺寸 D. 背景 资讯 
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应 用 jQuery Se 


jQuery 是 一 个 非常 优秀 的 JavaScript 框架 , 它 简化 了 HTML 文档 操作 、 事 件 处 理 、 动 
画 效 果 和 Ajax 交互 。 使 用 简单 灵活 ,同时 还 有 许多 成 熟 的 插件 可 供 选 择 , 它 还 可 以 帮助 用 
户 在 项 目 中 加 入 一 些 非常 好 的 效果 。 本 章 介绍 的 交互 菜单 效果 和 图 片 切换 效果 是 常用 的 内 
容 展 示 方 式 之 一 。 


本 页 中 菜单 的 交互 效果 。 
同 页 中 图 片 切换 效果 。 


7.1 关于 jQuery 


7L1 jary 的 概念 


jQuery 是 一 个 兼容 多 浏览 器 的 JavaScript 框架 ,核心 理念 是 write less,do more( 写 得 
更 少 , 做 得 更 多 )。jQuery 在 2006 年 1 月 由 美国 人 John Resig 在 纽约 的 barcamp 发 布 , 吸 
引 了 来 自 世界 各 地 的 众多 JavaScript 高 手 加 入 ,由 Dave Methvin 率领 团队 进行 开发 。 如 
今 ,jQuery 已 经 成 为 最 流行 的 JavaScript 框架 ,在 世界 前 1 万 个 访问 最 多 的 网 站 中 ,有 超过 
55% 在 使 用 jQuery。 

jQuery 是 免费 开源 的 ,使 用 MIT 许可 协议 。jQuery 的 语法 设计 可 以 使 开发 者 更 加 便 
捷 。 例 如 操作 文档 对 象 、 选 择 DOM 元 素 、 制 作 动 画 效果 、 事 件 处 理 \ 使 用 Ajax 以 及 其 他 功 
能 。 除 此 以 外 ,jQuery 提供 API 让 开发 者 编写 插件 ,其 模块 化 的 使 用 方式 使 开发 者 可 以 很 
轻松 地 开发 出 具有 一 定 交互 和 动态 效果 的 网 页 。 


712 jay 的 原理 与 运行 机 制 


在 Web 开发 中 ,主要 工作 任务 包括 三 部 分 ,一 是 查找 DOM 元 素 ; 二 是 对 DOM 元 素 进 
行 操作 ;三 是 浏览 器 的 兼容 问题 和 简化 JavaScript 的 本 身 自 带 的 操作 。jQuery 就 是 从 这 些 
问题 出 发 ,把 所 有 一 切 都 统一 在 jQuery 对 象 中 。 使 用 jQuery 就 是 使 用 jQuery 对 象 。 
jQuery 实质 就 是 一 个 查询 器 。 在 查询 器 的 基础 上 还 提供 对 查找 到 的 元 素 进 行 操作 的 功能 ， 
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这 样 说 来 jQuery 就 是 查询 和 操作 的 统一 。 查 询 是 入 口 ,操作 是 结果 。 总 之 ,jQuery 的 基本 
设计 思想 和 主要 用 法 ,就 是 “选择 某 个 网 页 元 素 ,然后 对 其 进行 某 种 操作 ”。 

jQuery 从 运行 机 制 上 看 ,可 以 分 成 两 大 部 分 。 第 一 部 分 是 jQuery 的 静态 方法 ,也 可 以 
称 作 实用 方法 或 工具 方法 ,通过 jQuery. XXX() 的 jQuery 命名 空间 直接 引用 。 第 二 部 分 
是 jQuery 的 实例 方法 ,通过 jQuery(X X) 或 $ (XXX) 来 生成 jQuery 实例 ,然后 通过 这 个 实 
例 来 引用 的 方法 。 这 部 分 的 方法 大 多 数 是 从 采用 静态 方法 代理 来 完成 功能 。 真 正 的 功能 性 
的 操作 都 在 jQuery 的 静态 方法 中 实现 。jQuery 运行 机 制 主要 包括 以 下 几 个 部 分 。 

(1) 网 页 元 素 查 找 机 制 。 查 找 网 页 元 素 ,包含 基于 CSS 1 一 CSS 3 的 CSS Selector 功 
能 ,还 包含 其 对 直接 查找 或 间接 查找 而 扩展 的 一 些 功能 。 

(2) DOM 元 素 属性 操作 机 制 。DOM 元 素 可 以 看 作 html 的 标签 ,操作 DOM 元 素 的 属 
性 就 是 对 标签 的 属性 进行 操作 。 这 个 属性 操作 包含 增加 、 修 改 、 删 除 `. 取 值 等 。 

(3) CSS 样式 操作 机 制 。CSS 是 控制 页 面 的 显示 的 效果 ,操作 DOM 元 素 的 CSS 样式 
包含 高 度 .宽度 ,display 等 这 些 常用 的 CSS 的 功能 。 

(4) Ajax 异步 通信 实现 机 制 。Ajax 的 功能 就 是 异步 从 服务 器 取 数 据 然后 进行 相关 
操作 。 

(5) 事件 封装 机 制 与 解析 。 对 Event 的 兼容 做 了 统一 的 处 理 。 

(6) 动画 实现 机 制 。 制 作 动画 (Fx) 效 果 , 可 以 看 作 是 CSS 样式 上 的 扩展 。 
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如 需 使 用 jQuery, 只 需要 下 载 jQuery 库 , 然 后 把 它 包 含 在 希望 使 用 的 网 页 中 。jQuery 
库 是 一 个 JavaScript 文件 ,使 用 HTML 的 二 script 二 标签 引用 它 即 可 。 


1 下 载 jQuery 库 

jQuery 有 两 个 版 本 可 供 下 载 。Production version 用 于 实际 的 网 站 中 ,已 被 精简 和 压 
缩 ;Development version 用 于 测试 和 开发 (未 压缩 ,是 可 读 的 代码 )。 每 个 版 本 又 分 为 两 个 
版 本 号 ,1. x 和 2.x。 其 中 ,2. x 不 再 支持 Internet Explorer 6、7、8。 

下 载 网 址 为 : http://jquery. com/download/。 

2 配置 jQuery 运行 环境 

jQuery 运行 环境 配置 有 两 种 方案 ,一 种 是 使 用 下 载 的 jQuery 库 文件 , 另 一 种 通过 CDN 
(内 容 分 发 网 络 ) 引 用 jQuery 库 文件 。 

(1) 使 用 下 载 的 jQuery 库 文件 

首先 ,把 下 载 的 jQuery 库 文件 (如 jquery-1. 10. 2. min. js) 放 到 网 站 上 一 个 公共 的 位 置 
(如 scripts) ,使 用 时 只 需要 引入 该 文件 即 可 。 


<head> 
< script src= "./scripts/jquery- 1.10.2.min.js"> < /script> 
< /head> 
(2) 通过 CDN( 内 容 分 发 网 络 ) 引 用 jQuery 库 文件 
此 方案 不 需要 下 载 并 存放 jQuery, 但 需要 能 够 连接 互联 网 络 。 如 果 用 户 是 国内 的 , 建 
议 使 用 百度 、 又 拍 云 ,新浪 等 国内 CDN 地 址 ;如 果 用 户 是 国外 的 ,可 以 使 用 谷歌 和 微软 。 
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<head> 
< script srcr "http://libs.baidu.oom/jquery/1.10.2/jquery.min.js"> 
< /script> 

< /head> 


3 测试 jQuery 


引入 jQuery 库 文件 之 后 ,用 户 就 可 以 进行 jQuery 测试 了 。 测 试 的 步骤 很 简单 ,在 导入 
jQuery 库 文件 的 二 script 盖 标签 行 下 面 ,重新 使 用 二 script 之 标签 定义 一 个 JavaScript 代码 


段 ,然后 就 可 以 在 二 script 一 标签 内 调用 jQuery 方法 测试 了 。 


< !DocTYPE html> 
<html xmlns= "http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http- eqniv= "Content- Type" content= "text/html; charset= utf- 8" /> 
< script type= "text/javascript" sro= "./script/jquery.1.10.2.js"> < /script> 
<title> jQuery 测试 < /title> 
< /head> 
<body> 
< script type= "text/javascript" > 
$ (function() { 
alert ("Hi, 您 好 !"); 
D; 
< /script> 
< /body> 
< /himl> 


在 浏览 器 中 预览 该 网 页 文件 , 则 可 以 看 到 在 当前 窗口 中 会 弹 图 7-1 测试 jQuery 结果 


出 一 个 提示 对 话 框 ,如 图 7-1 所 示 。 
【代码 解析 】 


在 jQuery 库 中 ,$ 是 jQuery 的 别名 ,如 $O 〇 等 效 于 jQuery()。jQuery() 函 数 是 jQuery 


库 文件 的 接口 函数 ,所 有 jQuery 操作 都 必须 从 该 接口 函数 切入 。jQuery() 函数 相 当 


页面 


初始 化 事件 处 理 函 数 , 当 页 面 加 载 完 毕 ,会 执行 jQuery() 函数 包含 的 函数 ,所 以 当 浏览 该 页 


面 时 ,会 执行 “alert("Hi, 您 好 !1");” 代 码 ,然后 将 看 到 弹出 的 信息 提示 对 话 框 。 


7.2 利用 jQuery 设计 网 站 导航 


网 站 导航 的 设计 是 关于 链接 的 设计 。 它 约定 了 站 点 上 网 页 和 内 容 的 重要 性 以 及 关联 
性 。 这 需要 在 网 页 信息 之 间 建 立 富有 意义 的 关系 式 进行 判断 。 综 合 起 来 ,导航 的 元 素 不 仅 
决定 了 用 户 是 否 能 找到 要 寻找 的 信息 ,还 决定 了 用 户 如 何 体验 那些 信息 。 菜 单 样式 是 网 站 
导航 的 基本 表现 形式 之 一 ,菜单 形式 的 网 站 导航 适合 放 在 页 眉 部 分 。 主 要 应 用 到 HTML 


中 的 过 div 二 标记 和 二 ul 二 过 li 六 配合 使 用 ,再 加 上 jQuery 实现 动态 效果 。 


721 制作 普通 下 拉 菜 单 
普通 下 拉 菜 单 是 最 常见 的 菜单 形式 。 该 形式 主要 用 于 表达 整个 网 站 的 站 点 地 图 。 这 种 

下 拉 菜 单 是 获取 鼠标 指针 是 否 通 过 顶层 菜单 来 实现 其 效果 。 

【知识 基础 】 


制作 此 种 菜单 应 用 到 的 jQuery 函数 主要 有 : ready() .hide() .show() css() .hover()、 
addClass() ,removeClass() 和 find() 等 ,如 表 7-1 所 示 。 
表 7-1 下 拉 菜 单 制作 jQuery 函数 表 
函数 名 功 能 使 用 格式 描 述 
使 用 ready() 来 使 | $ (document). ready (function 


所 有 jQuery 函数 位 于 一 个 


we 人 ee document ready 函数 中 
和 使 用 hide() 方 法 来 | $ ( selector )，hide ( speed，| 可 选 的 speed 参数 规定 隐藏 /显示 
隐藏 HTML 元 素 | callback); 的 速度 ,可 以 取 以 下 值 : slow \fast 
或 毫秒 。 可 选 的 callback 参数 是 
cowly 使 用 show() 方 法 来 | $( selector ). show (〈 speed，| 隐藏 或 显示 完成 后 所 执行 的 函数 


显示 HTML 元 素 callback) ; 名 称 


$ (selector). css ( " property- 


设置 或 返回 被 选 元 mn 


name", "value"); 设置 或 返回 被 选 元 素 的 一 个 或 多 
ooh 人 $ (selector). css (" property- | 个 样式 属性 
name"); 
当 鼠 标 移动 到 元 素 上 时 ,会 触发 
hover() 用 于 模拟 光标 各 你 $ (selector). hover(over,out)’; 人 
事件 当 鼠 标 移出 这 个 元 素 时 ,会 触发 


指定 的 第 二 个 函数 (mouseleave) 
向 被 选 元 素 添加 一 | $ (selector). addClass (class- | 该 方法 仅仅 添加 一 个 或 多 个 类 名 


addClass() 


个 或 多 个 类 名 name) 到 class 属性 
ey 从 被 选 元 素 移 除 一 | $ (selector). removeClass(cla- | 如 果 没 有 规定 参数 , 则 该 方法 将 
个 或 多 个 类 ssname) 从 被 选 元 素 中 删除 所 有 类 
g i 该 方法 沿 着 DOM 元 素 的 后 代 向 
findO ni $ (selector). find(filter) 下 遍历 ,直至 最 后 一 个 后 代 的 所 
全 有 路 径 ( 过 html>) 
【任务 实施 】 


案例 ”制作 普通 下 拉 莱 单 。 
任务 1 编写 网 页 结构 (文件 名 为 sample7_2_1. html) 。 


<div id "header"> 
<div class= "nav"> 
<ul class= "menulist"> 
<1li id-"n0"> <a href="default.htm" > 首页 < /a>< /li> 


作 一 HIML+ CSSrjQery 


we <li><a hre 人 = 提 "> 新 闻 < /a> 
<ul> 
<li><ahref= 叶 吃 新 浪 快讯 < /a>< /> 
<li><ahref= 叶 吃 国内 新 闻 </a></li> 
<li><a href= 哇 吃 军 事 快讯 < /a>< /li> 
</p 
</l> 
< 二 ><a href= 啡 '> 信 息 </a> 
<u> 
<1li><ahref 伍 哇 吃 数码 信息 </a>< /li> 
<1li><ahre= 哇 吃 教 育 信息 </a>< /li> 
<1li><ahre= 哇 吃 购 车 信息 < /a>< /li> 
<li><ahre 伍 哇 吃 购房 信息 < /a>< /1i> 
<1li><a hre 全 哇 吃 手机 资讯 < /a></li> 
</u> 
</1i> 
<1i ><ahref- 直 "> 商家 < /a> 
<uUl> 
<1li><a hre 人 = 哇 "> 淘 宝 卖家 < /a>< /li> 
<li><ahre 伍 哇 吃 亚马逊 </a></1li> 
</ul> 
</1i> 
<1i><ahref- 提 "> 社区 </a> 
<uUl> 
<1li><a hre 全 哇 吃 淘宝 社区 < /a></li> 
<1li><ahre 伍 嘲 吃 亚马逊 社区 </a>< /li> 
<1li><ahre 伍 啡 吃 腾 讯 社区 < /a>< /li> 
</ul> 
</Li> 
<1i><ahref- 提 "> 团 购 < /a> 
<uUl> 
<1li><a hre 伍 嘲 吃 办 公设 备 < /a></li> 
<1li><a hre 伍 啡 吃 健康 食品 </a>< /li> 
</al> 
</Li> 
</al> 
</div> 
</div> 


任务 2 编写 CSS 样式 文件 (文件 名 为 layout. css)。 


* {mrgin: Opx;padding: Opx;} 
div.nav { 
line— height: 36pxy 
background- color: # 333; 
height: 3gpx; 


} 

div.nava { 
color: #999; 
text— decoration: none; 
isplay: block; 
float: left; 
text- align: oenter; 
Padding right: Spx; 
Padding left: Spx; 
width: 100px; 

} 

divnavul Liulif 
line- height: 28pxy 
height: 28px; 

$$ 

div.nav ul { 
float: left; 
list- style- type: none; 
2Z- index: 20; 

} 

divnavul if 
float: left; 
margin bottom: Spx; 
min- width: 65px; 
_width: 65px; 
width: 110px; 

div.nav ul li a:hover { 
color: #F90; 
background- color: # CCC7 
Padding right: Spx; 
padding left: Spx; 


-on{ 
background- color: # 666; 
} 
div.nav ul Liuf{ 
display:none; 


1 BT 有 人 fH CStiQey 
150) 
se 任务 3 编写 jQuery 代码 (文件 名 为 base. js) 。 
$ (Gocument) .ready(functicn () { 

menu(); /人 头 部 导航 链接 样式 
D; 
// 头 部 导航 链接 样式 
function menu () { 
// 导 航 栏目 
$ (".nav> ul> li:not (# n0) ") .hover (function () { 
// 鼠 标 移动 该 栏目 
$ (".nav> ul> li:not (#n0)") .removeClass ("on"); 
$ (this) .addclass ("on"); 
$ (this) .find ("1") .show(); 
},function() { 
// 鼠 标 离开 该 栏目 
$ (this) .removeClass ("on"); 
$ (this) .find ("ul1") .higde (); 


任务 4 在 浏览 器 中 进行 测试 ,结果 如 图 7-2 所 示 。 


图 7-2 普通 下 拉 菜 单 效果 图 


7.22 制作 级 联 菜单 


级 联 菜单 的 实现 原理 与 上 面 的 下 拉 菜 单 类 似 , 主 要 是 获取 到 顶层 菜单 后 模拟 顶层 菜单 
的 鼠标 悬 停 与 离开 事件 ,并 设置 下 层 菜单 的 可 见 状态 来 完成 制作 效果 。 
【知识 基础 】 


制作 此 种 菜单 应 用 到 的 jQuery 函数 ready() .css() .hover() find() .show() (解释 如 
表 7-1 所 示 )。 另 外 ,还 要 用 到 jQuery 属性 :first, 如 表 7-2 所 示 。 


表 7-2 级 联 菜单 制作 jQuery 函数 及 属性 表 


函数 名 功 能 使 用 格式 描 述 
:first 选择 第 一 个 元 素 $(":first") 选择 第 一 个 元 素 
【任务 实施 】 


案例 ”制作 级 联 菜单 。 


任务 1 编写 网 页 结构 (文件 名 为 sample7_2_2. html) 。 


<u id "mav> 
<li><ahref=#">1HMK /az</l1i> 
<li><ahref=#" 2Css /a>< /li> 
<li><ahref= 嘎 "> 3 JavaScript < /a> 
<U> 
<li><ahref= 叶 "> 3.1 joueryc /a> 
<u> 
<li><ahref=#">3.1.1 Downloadc /a>< /li> 
<li><ahref=#">3.1.2 Tutorial< /a></li> 
</a> 
</li> 
<li><ahref=#"3.2 Mbotools< /a></li> 
<li><a href="#" 3.3 Prototype< /a>< /1i> 
</ul> 
</1> 
</al> 


任务 2 编写 CSS 样式 文件 (文件 名 为 main. css) 。 


@harset "utf- 8";» 
body { 
font- size: 0.85em; 
font- family: Verdana, Arial, Helvetica, sans- serif; 
} 
#nav, #navul { 
margin: 07 
Pedding: 0; 
list- style- type: none; 
list- style- position: outside; 
position: relative; 
line- height: 1.5em; 
} 
#nava { 
isplay: block; 
Pecding: OFpx Spx; 
border: lpx solid # 333; 
Color: # fff; 
text- decoration: none; 
background- color: #F60; 
#nav a:hover { 
background color: # fff; 
color: # 333; 


mM oy 


#navul ul { 
top: auto; 
} 
#navliiuuf{ 
left: 12em; 
margin: Opx 0 0 10px; 
} 


任务 3 编写 jQuery 代码 (文件 名 为 dropmenu. js) 。 


// 级 联 菜单 制作 

finction mainmenu (){ 

$ ("# nav ul ") .css({display: "none"}); // Opera Fix 

$ (" #nav 1i") .hover (function() { 
$ (this) .find('ul:first') .css ({visibility: "visible"}) .show(400); 
},function() { 
$ (this) .find('ul:first') .css ({visibility: "higden"}); 
D; 

’ 

$ (Gocument) .ready (functicn (){ 
mairmenu(); 

Ds; 


任务 4 在 浏览 器 中 进行 测试 ,结果 如 图 7-3 所 示 。 


3-1 iQuery 
3.11 Download 
3.12 Tutorial 
32 Mootools 
33 Prototype 


图 7-3 级 联 菜单 效果 图 


7.3 利用 jQuery 设计 Tab 选项 卡 


在 网 页 设计 中 经 常 使 用 Tab 标签 切换 的 方式 来 展示 网 页 内 容 ,这 样 做 有 两 点 好 处 : 节 
约 了 网 页 空间 而 展示 了 更 多 的 内 容 ; 将 不 同 分 类 的 内 容 放 在 不 同 标签 下 ,结构 清晰 。 下 面 介 
绍 两 款 通过 jQuery 实现 Tab 标签 效果 的 示例 。 


7.31 横向 选项 卡 设计 
【知识 基础 】 


制作 横向 选项 卡 应 用 到 的 jQuery 函数 ready() .css() .hover() ,find() show() ,index() 和 
eq 〇 等 ,index() 和 eq() 的 使 用 说 明 如 表 7-3 所 示 。 
表 7-3 横向 选项 卡 制作 jQuery 函数 及 属性 表 


函数 名 功 能 使 用 格式 描 述 
index() 人 $ (selector). index() | 元 素 的 index, 相 对 于 选择 器 

oO 选择 器 选取 带 有 指定 index 值 $ ("seq(index) ") index 值 从 0 开始 ,所 有 第 一 个 元 
二 的 元 素 Wig 素 的 index 值 是 0( 不 是 1) 


【任务 实施 】 


案例 制作 横向 选项 卡 。 
任务 1 编写 网 页 结构 (文件 名 为 sample7_3_1. html) 。 


< div id "buyact" class= "row790"> 
<div class= "thead"> 
<h2> 急 购 进行 时 ……< /h2> 
<ul class= "tab0"> 
<1i class- "index">< span> 新 品 内 购 < /span> < /1i> 
<1li><spar> 尾 品 处 理 < /span>< /li> 
<1i><span> 限 时 抢购 < /span> < /1i> 
< li><spar> 新 品 上 架 < /span> < /1i> 
</ul> 
</div> 
< div class= "tbody"> 
< div class= "block"> < img src= "images/A0.JPG" />< /div> 
< div class= "none"> < img src= "images/B0.JPG"/> < /div> 
< div class= "none"> < img src= "images/C0.JPG"/>< /div> 
< div class= "none"> < img src= "images/D0.JPG" />< /div> 
</div> 
< div id "footer"> 为 演示 和 学 习 方 便 , 内 容 区 使 用 图 片 < /div> 
</div> 
< script typer "text/javascript" src= "script/tabl.js"> < /script> 


任务 2 编写 CSS 样式 文件 (文件 名 为 tab. css) 。 


Q@charset "utf- 8"7 
/* Document */ 
* {mrgin: Or;padding: Opx;} 
#buyact { 
wigdth: 758px; 
height: 32px; 
Targin top: 15px; 
margin- right: auto; 
margin- left: auto; 


} 
div.thead { 
float: left; 
和 
div.thead ul { 
float: left; 
list- style- type: none; 
line height: 32pxy 
height: 32px; 
} 
div.thead ul li { 
float: left; 
height: 32px; 
width: 122pxy 
Color: #FFF; 
text- align: oanter; 
margin right: Sex; 
margin left: Spx; 
Cursor: pointer; 
background- color: # 666; 
} 
-none { 
display: none; 
b 
-block { 
display: block; 
} 
.tab0 1i.index { 
Color: #FFF; 
background- color: # BC241A; 
font— weight: bolder; 
} 


#buyact .thead .tab0 { 
margin- left: 180pr; 


任务 3 编写 jQuery 代码 (文件 名 为 tab.js) 。 


$ (Gocument) .ready (function () { 
tab(); 

D; 

function tab(){ 


var _cbj =$ (# buyact") .find(".tabO> 1i"); 


$ (obj) .click (function() { 


var _ID=$ ( obj).ingex(this); 


$ (bj) .removeClass(); 
$ (this) .addclass ("ingex") ; 


$ ("# buyact") .find(".tbody> div") .removeClass () .adiclass ("none") ; 
$ (buyect") .find('.tbody> div:eq(+ _ID+")") .remweClass() .adlass (Hlock); 


Ds; 
} 


任务 4 在 浏览 器 中 进行 测试 ,结果 如 图 7-4 所 示 。 
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7.32 纵向 选项 卡 设 计 
【知识 基础 】 


图 7-4 横向 选项 卡 效果 


图 


制作 纵向 选项 卡 应 用 到 的 jQuery 函数 ready()、css()、hover(),find()、not(index)、 
siblings() .eq(index) ,fadelIn() 等 ,部 分 函数 使 用 说 明 如 表 7-4 所 示 。 


表 7-4 纵向 选项 卡 制作 jQuery 函数 及 属性 表 


函数 名 功 能 


使 用 格式 


描 述 


从 匹配 元 素 集 合 中 删除 
元 素 


not(index) 


. not(element) 


一 个 或 多 个 需要 从 匹配 集中 删除 的 
DOM 元 素 
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' soey 


续 表 
函数 名 功 能 使 用 格式 描 述 
获得 匹配 集合 中 每 个 元 Ee 
siblings() | 素 的 同胞 ,通过 选择 器 | . siblings(selecton) ep 人 用 于 玫 开 天 家 从 
进行 筛选 是 可 选 的 
a index 整数 ,指示 元 素 的 位 置 (最 小 为 0); 
eq(index) ey . eq(index) 如 果 是 负数 , 则 从 集合 中 的 最 后 一 个 元 
Ce 素 往 回 计数 
可 选 的 speed 参数 规定 效果 的 时 长 , 它 可 
$ (selector). fadeIn | 以 取 以 下 值 : slow,fast 或 毫秒 ;可 选 的 
fadeIn() | 用 于 淡 人 已 隐藏 的 元 素 (speed, callback) callback 参数 是 fading 完成 后 所 执行 的 
函数 名 称 
【任务 实施 】 


案例 ”制作 纵向 选项 卡 。 
编写 网 页 结构 (文件 名 为 sample7_3_2. html) 。 


任务 1 


<div id- "ad"> 

<u id "tab left"> 
<li><ahre 伍 哇 "> 步 行 鞋 < /a>< /li> 
<li><ahre 伍 叶 史 小 家 电 < /a>< /li> 
<li><ahre 人 = 哇 吃 机 械 表 < /a>< /1i> 
<liid "tab left 4" ><ahre 全 啡 改 食 品 </a></1i> 

</u> 

<u id "tab oon"> 
< 1i> < img src= "images/ml .jpg"/>< /1i> 


< 1i> < img src= "images/m2.jpg" width= "810"/>< /1i> 


< li> < img src= "images/m3.jpg"/>< /li> 
< li> < img src= "images/m4.jpg"/>< /1i> 
</ul> 


</div> 
任务 2 


* {margin 
#tab left 


width: 


编写 CSS 样式 文件 (文件 名 为 tab2. css) 。 


: OFx;padding: Opx;} 
{ 
180px; 


height: 380px; 
2- index: 20; 


float: 
} 
#tab left 


left; 


it{ 


list- style- type: none; 
font- size: 20px; 


text— align: oanter; 


border- top: lpx solid # occ; 
} 
#tab left lia{ 
color: # 000; 
text— decoration: none; 
line height: 60px; 
height: 60pxy 
display: block; 
border- left: lpx solid # ccc; 
background- color: # FFF; 
} 
#tab left 1i a:hover { 
text— decoration: none; 
background- color: # FF3300; 


line- height: 60pxy 
} 
#tab con { 
width: 780pxy 
height: 390px; 
Overflow: hidden; 
float: left; 
2- index: 10; 
} 
#tab om li { 
float: left; 
} 
#ad { 
width: 960px; 
margin: 0 auto; 
margin top: 40px; 
border: lpx solid # 999; 
} 


任务 3 编写 jQuery 代码 (文件 名 为 tab2.js) 。 


$ (function() { 
var tabi= $ ( 啡 tab left") .find ("li" 
var oni=$ ( 啡 tab con") .find ("1i"); 
tabi .hover (function (){ 
var indesx= tabi .index (this); 
ooni .not (index) .siblings () -hide () 
Coni .eq (ingex) .fadeIn(); 
Ds; 
Ds; 


任务 4 在 浏览 器 中 进行 测试 ,结果 如 图 7-5 所 示 。 
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7.4 


纵向 选项 卡 效果 图 


利用 jQuery 设计 图 片 效 果 


图 片 是 指 由 图 形 、 图 像 等 构成 的 平面 媒体 ,是 传达 信息 的 主要 载体 。 为 了 使 图 片 最 大 限 


度 地 吸引 月 


目 户 ,需要 为 图 片 添加 各 种 各 样 的 动态 效果 。 


741 制作 图 片 切换 效果 


图 片 切换 效果 是 常见 的 图 片 效果 使 用 技术 之 一 。 其 原理 是 利用 jQuery 的 淡 入 效果 或 
其 他 自 定义 效果 用 待 显 示 的 图 片 覆盖 现在 正在 显示 的 图 片 。 


【知识 基础 】 


利用 jQuery 实现 淡 入 图 片 切换 效果 ,需要 使 用 到 函数 包括 ready() ,mouseover()、 
addClass() ,removeClass() ,attr() ,siblings()、eq(index) ,fadeIn()。 部 分 函数 的 使 用 方法 
如 表 7-5 所 示 。 


表 7-5 淡 入 图 片 切换 效果 制作 jQuery 函数 及 属性 表 


函数 名 功 能 使 用 格式 描 述 
a 从 匹配 元 素 集 合 中 删除 od ey 一 个 或 多 个 需要 从 匹配 集中 删除 的 
元 素 E DOM 元 素 
获得 匹配 集合 中 每 个 元 二 
siblings() | 素 的 同胞 ,通过 选择 器 | . siblings(selector) ea 人 
进行 筛选 是 可 选 的 
= index 整数 ,指示 元 素 的 位 置 ( 最 小 为 0) ; 
caGndeo | 将 下 本 志 素 集 入 沽 什 指 [Gingew 如 果 是 负数 , 则 从 集合 中 的 最 后 一 个 元 
素 往 回 计 数 
可 选 的 speed 参数 规定 效果 的 时 长 。 它 
$ (selector ). fadeIn | 可 以 取 以 下 值 : slow \fast 或 毫秒 
tn a | [apeadiealilaay 可 选 的 callback 参数 是 fading 完成 后 所 
执行 的 函数 名 称 


【任务 实施 】 


案例 制作 图 片 切换 效果 。 
任务 1 编写 网 页 结构 (文件 名 为 sample7_4_1. html) 。 


<body> 
<div id= "content"> 

<ul class= "img> 
<1 ><ahre 全 啡 "><jmg src= "images/ml .jpg" width= "760" height= 
"480" /></aP></li> 
<1 ><ahre 全 啡 "><jmg src= "images/m2.jpg" width= "760" height= 
"325" />< /< /> 
<li><a href="#">< img src= "images/m3.jpg" width= "760" height= 
"480" />< /a>< /1i> 
<1i><a href="#"> < img src= "images/mA.jpg" width= "760" height= 
"480" /></a></1i> 

</u> 

<u class= "imgid"> 
<1i class= "active"> 1< /li> 


<li>2X/l> 
<li>x/l> 
<1i>4 /li> 
</al> 
</div> 
</body> 


任务 2 编写 CSS 样式 文件 (文件 名 为 imgcut, css) 。 


* {mrgin: Opx;padding: Opx;} 
#oontent { 
height: 480px; 
width: 760px; 
margin- right: auto; 
margin- left: auto; 
margin- top: 30px; 
border: lpx solid # 999; 
} 
#omtent ul li { 
float: left; 
} 
# content ul.img { 
2- index: 1; 
float: left; 
height: 480px; 
width: 760px; 
averflow: hidden; 


# content ul .imgid { 
2- index: 40; 
float: left; 
list- style- type: none; 
background- color: # C90; 
position: relative; 
bottom: S50px; 
height: 24px; 
line_ height: 24px; 
width: 760px; 
text- align: right; 

} 

# content .imgid li { 
float: left; 
height: 20px; 
width: 20px; 
background- color: #FFF; 
margin- right: Spx; 
margin- left: Spx; 
color: #F00; 
text- align: oanter; 
1line_- height: 20pxy 
font- weight: bolder; 
font- size: 16px7 
border: lpx solid # FO0; 


# oontent .imgid .active { 
font— size: 16px7 
font— weight: bolder; 
Color: #FEF; 
background- oolor: #F30; 
border: lpx solid # FEF; 
} 


任务 3 编写 jQuery 代码 (文件 名 为 imgcut. js) 。 


$ (function(){ 
$ ('.imgid 1i') .mouseover (functicn (){ 
$ (this) .addclass ("active") .siblings () .removeClass ("active") ; 
var i=$ ('.imgid 1i') .index (this); 
$ ('.img 1i") .not (i) -siblings() .hige(); 
$ (".ing 1i') .eq(i) .fadeIn (1000); 
Ds; 
D; 


任务 4 在 浏览 器 中 进行 测试 ,结果 如 图 7-6 所 示 。 
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图 7-6 图 片 切换 效果 图 


742 制作 图 片 滚动 效果 
图 片 滚动 效果 主要 有 垂直 滚动 和 水 平 滚动 两 种 效果 。 本 节 主 要 介绍 水 平 滚动 效果 的 制作 。 
【知识 基础 】 


图 片 水 平 滚动 效果 的 制作 原理 是 利用 jQuery 的 scrollLeft() 函 数 不 断 修改 水 平 深 动 条 的 
偏 移 量 ,使 相对 原 有 位 置 发 生 偏 移 ,从 而 产生 滚动 效果 。jQuery 还 有 一 个 函数 scrollTop()， 
它 的 作用 是 垂直 滚动 。 图 片 水 平 滚动 效果 的 制作 还 将 涉及 的 函数 有 ready()、html()、 
width() ,scrollLeft() .hover() 和 JavaScript 图 数 clearInterval() ,setInterval() 等 ,部 分 函数 


的 使 用 方法 如 表 7-6 所 示 。 
表 7-6 图 片 滚动 效果 制作 jQuery 函数 及 属性 表 


函 数 名 功 能 使 用 格式 描述 
es 返回 或 设置 被 选 元 素 的 | (octor) htmml() | 如 果 该 方法 未 设置 参数 , 则 返回 被 
内 容 (inner HTML) “ 选 元 素 的 当前 内 容 
i 返回 或 设置 匹配 元 素 的 | (lcciory width() | 如 果 不 为 该 方法 设置 参数 , 则 返回 
宽度 以 像素 计 的 匹配 元 素 的 宽度 
本 三 滚动 条 的 水 平 位 置 指 的 是 从 其 左 侧 
ee er $ (selector). scrollLeft(》 | 滚动 过 的 像素 数 , 当 滚动 条 位 于 最 
左 侧 时 ,位 置 是 0 
rollTow() | 返回 或 设置 匹配 元 素 的 | $ (selector). serollTop | 该 方法 对 于 可 见 元 素 和 不 可 见 元 素 
四 滚动 条 的 垂直 位 置 Coffseb) 均 有 效 
jearh lo 可 取消 由 setInterval() | clearInterval (id _ of _ | id_of_setinterval 由 setInterval() 返 
Sear nterva | 设置 的 timeout setinterval) 回 的 ID 值 
可 按照 指定 的 周期 (以 a sn hl i 
setInterval() | 毫秒 计 ) 来 调用 函数 或 setInterval(code, millisec | 行 的 代码 串 ; millisec, 必需 的 , 周 
计算 表达 式 [,"lang"]) 性 执行 或 调用 code 之 间 的 时 间 间 
隔 , 以 毫秒 计 
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【任务 实施 】 


案例 制作 图 片 水 平 滚动 效果 。 
任务 1 编写 网 页 结构 (文件 名 为 sample7_4_2. html) 。 


< !DOCTYFE html> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
< meta http- eqniv "Content- Type" content= "text/html; dharset=utf- 8" /> 
<title> 图 片 水 平 滚动 效果 的 制作 < /title> 
< link rel= "stylesheet" type= "text/css" href= "css/marquee.css"/> 
< script type= "text/javascript" sro= "script/jquery.1.10.2.js"> < /script> 
< /head> 
<body> 
<div id "main"> 
<div id "in" style= "width:300%;"> 
<div id "pl"> 
<ahref="# ">< img src= "images/picl.jpg" /></a> 
<ahref="# ">< img src= "images/pic2.jpg" /></a> 
<ahref=# "< img src= "images/pic3.jpg" /></a> 
<ahref="# "> < img src= "images/pic4.jpg" />< /a> 
<ahref="# "> < img sro= "images/pic5.jpg" />< /a> 
</div> 
<div id "po> < /div> 
< /div> 
< /div> 
< script type= "text/javascript" src= "script/imgrarquee.js"> < /script> 
< /body> 
< /html> 


任务 2 编写 CSS 样式 文件 (文件 名 为 marquee. css) 。 


* {margin: Opx;padding: Opx;} 


#main { 
width: 500px; 
margin- right: auto; 
margin- left: auto; 
Overflow: hidden; 
border: lpx solid # 666; 


任务 3 编写 jQuery 代码 (文件 名 为 imgmarquee. js) 。 


Var timer; 
// 构 建 滚动 区 域 
$ (#2") .html ($ ("#p1") -html ()); 
var imgMarquee= functicn () { 
if($ (#main") .scrollleft ()>=$ (#p1") .width()){ /判断 滚动 条 是 否 超 长 
$ ("#1main") .scrollIeft (0); 
Jelse{ 
和 $ ( 啡 main .scrollIeft G (只 main") .scrollIeft0+1); /改变 滚动 条 偏 移 量 


] 


Var timer= window.setInterval ("imgMarquee ();",20); // 连 续 滚 动 
$ (#1main") .bover( 
function() { 
clearTInterval (timer); // 停 止 滚动 
ls 
function() { 
timer= setInterval (imgMarquee, 20) ; // 继 续 滚动 


D0; 
任务 4 在 浏览 器 中 进行 测试 ,结果 如 图 7-7 所 示 。 
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图 7-7 图 片 水 平 滚动 效果 


7.5 任务 拓展 


任务 图 片 预览 的 制作 。 

任务 描述 : 当 页 面 加 载 完成 后 显示 小 图 片 ,但 当 将 鼠标 放 在 小 图 片上 就 会 出 现 相 应 的 
大 图 片 , 鼠 标 从 小 图 片上 移 开 后 大 图 也 随 之 消失 。 

任务 要 求 : 利用 jQuery 完成 此 任务 ,使 用 图 片 自选 。 
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7.6 本 章 小 结 


本 章 通过 介绍 jQuery 的 概念 ,原理 与 运行 机 制 和 运行 环境 。 重 点 是 应 用 jQuery 实现 
菜单 .Tab 选项 卡 和 图 片 显示 效果 的 设计 与 制作 。 难 点 是 如 何 控制 元 素 的 切换 及 其 效果 。 
通过 本 章 学 习 将 为 网 站 前 端 设 计 葛 定 一 定 的 知识 和 技术 基础 。 


习 题 


(1) 利用 jQuery 实现 网 站 垂直 导航 栏 设 计 。 

(2) 利用 jQuery 实现 图 片 动态 弹出 效果 设计 。 具 体 要 求 是 先 将 图 片 隐藏 起 来 ,等 用 户 
需要 显示 的 时 候 (如 鼠标 悬 停 在 文字 链接 上 时 ) 再 动态 弹出 ,此 效果 多 用 于 商业 网 站 。 

(3) 利用 jQuery 实现 图 片 垂直 滚动 效果 设计 。 
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jQuery Mobile 是 一 种 Web 框架 ,用 于 创建 移动 Web 应 用 程序 ,是 jQuery 在 手机 和 平 
板 电脑 设备 上 的 版 本 ,支持 全 球 主 流 的 移动 平台 。 通 过 jQuery Mobile 能 够 非常 容易 实现 
移动 产品 网 页 的 设计 与 制作 。 


8.1 了 解 jQuery Mobile 


811 关于 jayMobile 


jQuery Mobile 是 一 种 Web 框架 ,用 于 创建 移动 Web 应 用 程序 ,是 jQuery 在 手机 和 平 
板 电脑 设备 上 的 版 本 。jQuery Mobile 不 仅 会 给 主流 移动 平台 带 来 jQuery 核心 库 , 而 且 会 
发 布 一 个 完整 统一 的 jQuery 移动 UI 框架 ,支持 全 球 主 流 的 移动 平台 。 

jQuery Mobile 以 “Write Less， Do More” 作 为 目标 ,为 所 有 的 主流 移动 操作 系统 平台 
提供 了 高 度 统一 的 UI 框架 : jQuery 的 移动 框架 可 以 为 所 有 流行 的 移动 平台 设计 一 个 高 度 
定制 和 品牌 化 的 Web 应 用 程序 ,而 不 必 为 每 个 移动 设备 编写 单独 的 应 用 程序 或 操作 系统 。 

jQuery Mobile 目前 支持 的 移动 平台 有 鞋 果 公司 的 iOS(CiPhone iPad iPod Touch)、 
Android、BlackBerry OS 6. 0 惠普 WebOS、Mozilla 的 Fennec、Opera Mobile。 今后 ,将 增加 
包括 Windows Mobile、Symbian、MeeGo 在 内 的 更 多 移动 平台 。 

根据 jQuery Mobile 项 目 网 站 ,目前 jQuery Mobile 的 特性 包括 以 下 几 方 面 。 

jQuery 核心 : 与 jQuery 桌面 版 一 致 的 jQuery 核心 和 语法 ,以 及 最 小 的 学 习 曲 线 。 

兼容 所 有 主流 的 移动 平台 : 包括 iOS、Android、 BlackBerry、Palm WebOS、Symbian、 
Windows Mobile、BaDa、MeeGo 以 及 所 有 支持 HTML 的 移动 平台 。 


sy 
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轻 量 级 : Alpha 版 本 的 jQuery Mobile 其 JavaScript 大 小 仅 为 12KB,CSS 文件 也 只 有 
6KB 大 小 。 
标记 驱动 的 配置 : jQuery Mobile 采用 完全 的 标记 驱动 而 不 需要 JavaScript 的 配置 。 
渐进 增强 : jQuery Mobile 采用 完全 的 渐进 增强 原则 。 通 过 一 个 全 功能 的 HTML 网 
页 ,和 额外 的 JavaScript 功能 层 , 提 供 顶 级 的 在 线 体验 。 这 意味 着 即使 移动 浏览 器 不 支持 
JavaScript, 基 于 jQuery Mobile 的 移动 应 用 程序 仍 能 正常 地 使 用 。 
自动 初始 化 : 通过 使 用 mobilize() 函数 自动 初始 化 页 面 上 的 所 有 jQuery 部 件 。 
无 障碍 : 包括 WAI-ARIA 在 内 的 无 障碍 功能 以 确保 页 面 能 在 类 似 于 VoiceOver 等 语 
音 辅 助 程序 和 其 他 辅助 技术 下 正常 使 用 。 
简单 的 API: 为 用 户 提供 鼠标 触摸 和 光标 焦点 简单 的 输入 法 支持 。 
强大 的 主题 化 框架 : jQuery Mobile 提供 强大 的 主题 化 框架 和 UI 接口 。 
812 安装 jQuery Mbbile 
如 果 在 浏览 器 中 正常 运行 一 个 jQuery Mobile 移动 应 用 页 面 ,需要 安装 jQuery Mobile。 
主要 包含 3 个 文件 。 分 别 为 jquery-1. 8. 3. min. js、jquery. mobile-1. 3. 2. min. js、jquery. 
mobile-1. 3. 2. min. css。 其 中 ,jquery-1. 8. 3. min. js 为 主 框架 插件 文件 ;jquery. mobile-1. 3. 
2. min. js 为 jQuery Mobile 框架 插件 文件 ;jquery. mobile-1. 3. 2. min. css 为 jQuery Mobile 
框架 附加 的 CSS 样式 表 文件 。 
以 上 jQuery Mobile 插件 文件 版 本 很 多 ,读者 可 以 有 多 个 办 法 在 网 站 上 使 用 jQuery 
Mobile。 可 以 从 CDN 引用 jQuery Mobile, 也 可 以 从 jQuerymobile. com 网 站 下 载 jQuery 
Mobile 库 。 


1 从 CON 引 用 jQuery Mibile 

CDN(Content Delivery Network) 用 于 通过 Web 来 分 发 常用 的 文件 ,以 此 加 快 用 户 的 
下 载 速 度 。 与 jQuery 类 似 , 无 须 在 计算 机 上 安装 任何 程序 ;只 需 直 接 在 HTML 页 面 中 引 
用 以 下 样式 表 和 JavaScript 库 ,jQuery Mobile 就 可 以 工作 了 。 


< link rel= "stylesheet" href= "http://code.jqvery.om/mobile/1.4.4/jqvery .mcbile— 1.4.4.min.css" /> 

< script src= "http://code.jquery.cajquery- 1.11.1.min.js"> < /script> 

< script src= "http://code.jquery.com/mcbile/1.4.4/jquery.mcbile- 1.4.4.min.js"> < /script> 

通过 URL 加 载 jQuery Mobile 插件 的 方式 使 版 本 更 新 更 加 及 时 ,但 由 于 是 通过 jQuery 
CDN 服务 器 请 求 的 方式 进行 页 面 加 载 ,在 执行 页 面 时 必须 保证 网 络 畅通 ,否则 不 能 实现 
jQuery Mobile 移动 页 面 的 效果 。 

2 下 载 jQuery Mibile 

如 果 和 希望 在 服务 器 上 存放 jQuery Mobile, 可 以 从 jQuerymobile. com 网 站 上 下 载 文件 ， 
如 图 8-1 所 示 。 

< link href= "jquery mcbile/jquery.mcbile 1.4.4.min.css" rel= "stylesheet" type= 

"text/css"/> 

< script src= "jquery mcbile/jquery— 1.4.4.min.js" typer "text/javascript"> 

< /script> 
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< script src= "jquery- mobile/jquery-mcbile 1.4.4.min.js" typer "text/javascript"> < /script> 


将 下 载 的 文件 复制 到 网 站 文件 夹 中 即 可 。 


[ee 


DB revioveomobiecomdomca 0- scx 攻 省 旺 : 


© Download ljQuen Mobile x 


Latest stable version 

1.4.4 

ZiPfile 

Wf you want to host the files yourself you can download a zip of all the files: 
» Zip File: iquery .mobile-1.4.4.zip (JavaScript, CSS, and images) 

jQuery CDN provided by MaxCDN 

JavaScript 


» Uncompressed jquery moblle-14 .4js (useful for debugging) 
。 Minified and Gzipped: jauery mobile-1.4.4 min js (full library, ready to deploy) 


» Uncompressed with Defaull theme: jquery mobile-1.4.4.css (useful for 
debugging) 

» Minified and Gzipped with Default theme jquery mobile-1.4 .4 min css (full 
library, ready to deploy) 

* Uncompressed structure without a theme jiquery mobille -1.4 4 css (useful for 
theme development) 

* Minified and Gzipped structure without a theme jquery mobile -1.4 4 min css 
(to be used with custom theme and icon CSS, ready to deploy) 


图 8-1 下 载 jQuery Mobile 插件 


8.2 创建 第 一 个 移动 产品 网 站 
上 节 介 绍 了 关于 jQuery Mobile 的 概念 、 特 征 ,介绍 了 如 何 下 载 安装 jQuery Mobile。 在 
本 节 将 系统 介绍 页 面 的 基本 结构 ,完成 第 一 个 移动 网 站 。 
821 制作 单 容 器 页 面 结构 网 站 
制作 一 个 介绍 长 白山 的 网 站 ,页面 中 包括 一 幅 自动 缩放 图 片 和 一 段 介绍 长 白山 的 文字 。 
如 图 8-2 所 示 。 
【知识 基础 】 


页 面 的 结构 对 网 站 维护 和 用 户 体验 尤为 重要 。 页 面 布局 直接 决定 了 整体 的 用 户 体验 。 
jQuery Mobile 应 用 了 HTML 5 标准 的 特性 ,有 一 个 基本 的 页 面 框架 模型 ,如 图 8-3 所 示 。 
在 该 框架 模型 中 ,任何 一 个 页 面 基本 上 都 是 由 页 眉 、 内 容 、 页 脚 三 部 分 构成 。 
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长 白山 位 于 吉林 省 东南 部 延边 朝鲜 族 自治 州 安 

图 县 和 白山 市 抚 松 县 境内 ， 编 延 约 1000 公 里 ， 

总 面积 8000 余 平方 公里 ， 亦 作 白 头 山 ， 号称“ 东 
北 屋脊 ,是 中 朝 两 国 的 界 山 、 中 华 十 大 名 山 之 
一 、 国 家 5A 级 风景 区 ，1980 年 列 入 联合 国 国际 
生物 图 保 护 区 ，1986 年 被 国务 院 批准 为 国家 级 
自然 保护 区 。 


图 8-2 


jQuery Mobile 通过 二 div 二 标签 
置 为 page, 形 成 一 个 页 面容 器 。 


<div data- role= "page" id- "page"> 


<div data- role= "header"> 
<hl> 标 题 < /hl> 
</div> 


“长 白山 简介 ”网 站 效果 


的 data-role 属性 设 


<div data- role= "oontent"> 内容 < /div> 


<div data- role= "footer"> 


<hl> 页 脚 < /> 
</div> 
</div> 


通过 浏览 器 查看 页 面 效果 ,如 图 8-4 所 示 。 
i 就 是 data-role。 属 性 为 
header、content、footer 的 3 个 子 容器 ,分 别 描述 为 “标题 ” 
“内 容 ?“ 页 脚 ?部 分 ,用 于 容纳 不 同 的 页 面 内 容 。 详 细 的 
data-role 属性 设置 如 表 8-1 所 示 。 


在 这 个 容器 中 ,直接 的 子 


标题 (页 眉 ) 区 域 


内 容 区 域 


页 脚 区 域 


图 8-3 


jQuery Mobile 页 面 框架 模型 


单 容器 页 面 结构 


图 8-4 


表 8-1 data-role 属性 值 说 明 
属性 值 说 明 
page 页 面容 器 ,其 内 部 的 mobile 元 素 将 会 继承 这 个 容器 上 所 设置 的 属性 
header 页 面 标题 容器 ,这 个 容器 内 部 可 以 包含 文字 、 返 回 按钮 、 功 能 按钮 等 元 素 


footer 


页 面 页 脚 容 器 ,这 个 容器 内 部 也 可 以 包含 文字 ,返回 按钮 .功能 按钮 等 元 素 


属性 值 


说 明 


content 


页 面 内 容 容 器 ,这 是 一 个 很 宽容 的 容器 ,内 部 可 以 包含 标准 的 html 元 素 和 jQuery 
Mobile 元 素 


controlgroup 


将 几 个 元 素 设置 成 一 组 ,一 般 是 几 个 相同 的 元 素 类 型 


fieldcontain 


区 域 包 囊 容器 ,用 增加 边 距 和 分 割 线 的 方式 将 容器 内 的 元 素 和 容器 外 的 元 素 明显 分 隔 


navbar 


功能 导航 容器 ,通俗 地 讲 就 是 工具 条 


listview 


列表 展示 容器 ,类 似 手机 中 联系 人 列表 的 展示 方式 


list-divider 


列表 展示 容器 的 表 头 ,用 来 展示 一 组 列表 的 标题 ,内 部 不 可 包含 链接 


button 


按钮 ,将 链接 和 普通 按钮 的 样式 设置 成 为 jQuery Mobile 的 风格 


none 


【任务 实施 】 


阻止 框架 对 元 素 进行 泻 染 ,使 元 素 以 html 原生 的 状态 显示 ,主要 用 于 form 元 素 


案例 ”制作 单 容器 网 站 页 面 。 


任务 1 


添加 页 面容 器 ,并 设置 页 面 标题 和 页 脚 。 


< !doctype html> 


<html> 
<head> 


<meta charset= "utf- 8"> 

< meta name= "viewport" content= "width= devioe— width; initial- scale=1.0; /> 
<title> 单 页 面 结构 网 页 < /title> 

< link href= "jquery_ mcbile/jquery.mcbile 1.0.min.css" rel= "stylesheet" type= "text/css"> 
< script src= "jquery- mobile/jquery- 1.6.4.min.js" type= "text/javascript"> < /script> 

< script src= "jquery_mcbile/jqery mbile— 1.0min.js" type- "text/javescript"> < /script> 


< /head> 


<body> 


<div data- role= "page" id= "page> 
<div data- role= "header"> 


<h2> 长 白山 < /> 


</div> 
<div data- role= "content"> 


</div> 


<div data- role= "footer"> 


<h4> 长 白山 旅游 < /h4> 


</div> 


</div> 


< /body> 


< /html> 


任务 2 


编写 页 面 内 容 。 


{ sey 


<div data- role= "content"> 
<P class= "img center"> < jimg src= "img/0.jpg> < /p> 
< 了 长 白山 位 于 吉林 省 东南 部 延边 朝鲜 族 自治 州 安 图 县 和 白山 市 抚 松 县 境内 ,绵延 约 1000 公 里 ,总 
面积 8000 余 平方 公里 , 亦 作 白 头 山 ,号 称 “ 东 北 屋 消 ”, 是 中 朝 两 国 的 界 山 、 中 华 十 大 名 山 之 一 、 国 家 
所 级 风景 区 ,1980 年 列 和 人 联合国 国 际 生物 圈 保 护 区 ,1986 年 被 国务 院 批准 为 国家 级 自然 保护 区 。</ 
pp 

</div> 

任务 3 添加 CSS 样式 。 

在 整个 页 面 布局 中 ,要 求 图 片 居中 对 齐 , 所 以 创建 一 个 style 样式 表 , 将 页 面 中 所 有 图 片 

宽度 改变 为 90% ,设置 图 片 居 中 对 齐 ,并 根据 浏览 器 分 辩 率 自动 缩放 。 


< style type= "text/css"> 
ing { 

width: 90%; 
} 
.img center{ 

text- align:centery 
} 
< /style> 


任务 4 浏览 测试 。 页 面 效 果 如 图 8-2 所 示 。 
822 制作 多 容器 页 面 结构 网 站 

制作 一 个 介绍 长 白山 景点 的 网 站 ,如 图 8-5 所 示 。 该 网 站 由 一 个 主页 面 和 两 个 子 页 面 
构成 。 在 主页 面 中 , 单 击 “ 长 白山 天 池 ” 链 接 , 跳 转 进 入 “长 白山 天 池 ” 子 页 面 。 在 子 页 面 中 单 
击 “ 返 回 "链接 , 返 回 到 主页 面 。 单 击 “ 长 白 大 瀑布 "链接 , 亦 是 如 此 。 
【知识 基础 】 

1 多 容器 页 面 

通过 一 div 之 标签 的 data-role 属性 设置 为 page, 形 成 一 个 页 面容 器 。 在 文档 中 ,允许 通 
过 添加 多 个 data-role 属性 为 page 的 二 div 二 标签 ,形成 多 容器 页 面 结构 。 

容器 之 间 各 自 独 立 ,通过 唯一 的 id 属性 值 进 行 区 分 。 页 面 加 载 时 ,以 堆栈 的 方式 同时 
加 载 。 容 器 访问 时 ,以 内 部 “# ”链接 对 应 的 id 的 方式 进行 设置 。 

<ahre 人 只 容器 id 值 少 链接 容器 < /a> 


单 击 链接 时 ,jQuery Mobile 将 在 页 面 文档 中 寻找 对 应 id 的 容器 ,以 过 渡 效 果 切 换 到 该 
容器 中 ,实现 容器 间 内 容 的 访问 。 


<div data- roler= "page" id- "page"> 
<div data- role= "header"> 
<h> 主 容器 < /hl> 
</div> 
<div data- role= "oontent"> 
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长 白 大 湿布 


天 池 像 一 块 瑰丽 的 妖 玉 锐 府 在 雄伟 的 长 白山 群 长 白山 奇峰 环绕 ， 北 侧 天 文 峰 与 龙门 峰之 间 有 
妊 之 中 ， 它 是 中 国 最高 最 大 的 高 山 湖 泊 。 和 柔美 缺口 ， 池 水 由 此 忠 口 溢出 ， 穿 流 在 悬 源 情 竖 
上 搓 河 向 北 流 经 1250 米 处 的 新 崖 飞 流 直 
i 候 多 变 ， 多云， 下 ,以 雪 佳 万 多 之 势 ， 夹带 着 震 天 的 已 声 ， 跌 


、 雾 、 雨 、 雪 把 天 六 人 向 深 深 的 谷底 ， 形 成 落差 68 米 高 的 瀑布 ， 这 就 
人 “ 裔 且 更 加 应 幻 神秘 ， 如 过 Er ， 它 是 长 白山 的 第 一 名 
返回 返回 


图 8-5 “长 白山 景点 ”网 站 页 面 效 果 


<u data- role= "listview"> 
<li><a hre= 哇 page2"> 子 容器 < /a>< /li> 
</al> 
</div> 
<div data- role= "footer"> 
<h4> 页 脚 < /h4> 
</div> 
</div> 
<div data- role= "page" id "page2"> 
<div data- role= "header"> 
<hl> 子 容器 < /hl> 
</div> 
<div data- role= "oontent"> 
内 容 
< /div> 
<div data- role= "footer"> 
<h4> 页 脚 < /h4> 
</div> 
</div> 


通过 浏览 器 ,可 以 看 到 主 容器 的 内 容 , 并 显示 其 余 一 个 子 容器 的 链接 ,如 图 8-6 所 示 。 
在 主页 面容 器 中 单 击 “ 子 容器 "链接, 即 可 浏览 子 容器 的 内 容 。 

2 页 面 过 渡 

jQuery Mobile 拥有 一 系列 关于 如 何 从 一 页 过 渡 到 下 一 页 的 效果 。 可 以 为 页 面 切 换 时 
提供 过 渡 效 果 。 

如 需 实现 过 渡 效 果 , 浏 览 器 必须 支持 CSS3 3D 转换 。 目 前 浏览 器 中 仅 Internet 


Explorer 10 支 


Wb 前 端 设计 与 制作 一 -HTML+ CSSrjQuery 


子 容器 


页 脚 


图 8-6 多 容器 页 面 结构 


寺 3D 转换 , 较 早 的 版 本 不 支持 。 


过 渡 效 果 可 应 用 于 任意 链接 或 通过 使 用 data-transition 属性 进行 的 表单 提交 。 


<a href= 只 anylink" data- transition= "slide"> 滑 动 到 页 面 二 < /a> 


表 8-2 展示 了 可 与 data-transition 属性 一 同 使 用 的 可 用 过 渡 。 
表 8-2 data-transition 属性 值 说 明 
属性 值 描 述 属性 值 描 述 
fade 默认 , 淡 人 淡出 到 下 一 页 slidefade 从 右 向 左 滑动 并 淡 和 人 到 下 一 页 
flip 从 后 向 前 翻动 到 下 一 页 slideup 从 下 到 上 滑动 到 下 一 页 
flow 抛 出 当前 页 面 ,引入 下 一 页 slidedown 从 上 到 下 滑动 到 下 一 页 
pop 像 弹 出 窗口 那样 转 到 下 一 页 turn 转向 下 一 页 
slide 从 右 向 左 滑动 到 下 一 页 none 无 过 渡 效果 


在 jQuery Mobile 中 , 淡 入 淡出 效果 在 所 有 链接 上 都 是 默认 的 。 以 上 所 有 效果 同时 支持 反 
向 动作 。 例 如 ,如 果 和 希望 页 面 从 左 向 右 滑 动 ,请 使 用 值 为 "reverse” 的 data-direction 属性 。 
3 后 退 链接 


在 网 页 浏览 


h, 单 击 链接 后 ,切换 到 另外 一 个 页 面 ,再 返回 到 上 一 页 面 , 称 为 后 退 链 接 。 


在 jQuery Mobile 中 ,主要 通过 在 容器 中 设置 data-add-back-btn 属性 值 为 true, 或 者 是 添加 
二 a 二 标签 ,并 设置 data-rel 属性 为 back, 实 现 后 退 到 上 一 页 效果 。 


< div data- roler "page" id- "page" data- ad back_ btn= "true"> 


<div data- role= "header"> 
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<hl> 标 题 < /bl> 
</div> 
<div data- role= "content"> 内 容 < /div> 
< div data- role= "footer"> 
<h4> 页 脚 < /h4> 
</div> 


</div> 

浏览 网 页 , 单 击 页 面 中 的 Back 或 “返回 "链接 , 即 可 返 
回 到 上 一 页 。 如 图 8-7 所 示 。 

如 果 添 加 了 data-rel 二 "back" 属 性 给 某 个 链接 , 那 对 
于 该 链接 的 任何 单 击 行为 ,都 是 后 退 的 行为 ,会 无 视 链接 
的 href 属性 ,后 退 到 浏览 器 历史 的 上 一 个 地 址 。 


【任务 实施 】 


案例 制作 长 白山 景点 赏析 网 站 页 面 。 
任务 1 编写 主 容器 页 面 代码 。 


< div data- role= "page" id "page"> 图 8-7 后 退 链接 
< div data- role= "header"> 
<hl> 长 白山 < /hl> 
</div> 
<div data- role= "content"> 
<ul data- role= "listview"> 
<1i><a href= 啡 page2" data- transition= "pop"> 长 白山 天 池 </a>< /li> 
<1i><a href- 啡 page3" data- transition= "pop"> 长 白 大 瀑布 </a>< /li> 
</al> 
</div> 
<div data- role= "footer"> 
<h4> 长 白山 旅游 < /h4> 
</div> 
</div> 


任务 2 编写 “长 白山 天 池 ” 子 容器 代码 。 


< div data- role= "page" id-= "page2"> 

<div data- role= "header"> 
<hl> 长 白山 天 池 < /> 

</div> 

<div data- role= "content"> 
<P class= "img center"> < img src= "img/1.jrg> < /p> 
< 访 天 池 像 一 块 瑰丽 的 特 玉 镶嵌 在 雄伟 的 长 白山 群 峰之 中 , 它 是 中 国 最 高 最 大 的 高 山 湖泊 。 
柔美 的 天 池 和 白云 综 绕 ,五 色 斑 调 ,波光 岚 影 , 群 峰 环抱 , 蔚 为 壮观 。 天 池上 空气 候 多 变 ,多 云 、 
多 雾 、 多 十 ,多 雪 , 云 . 雾 . 雨 雪 把 天 池 不 仅 装点 得 美丽 动人 ,而 且 更 加 虚幻 神秘 , 迷 迷 茫茫 。 
< 人/ 位 
<E><ahre 会 啡 "datar- rel= "ack 必 > 返 回 < /a>< /p> 

</div> 


‘ TEM iony 
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A <div data- role= "footer™> 

<h4> 长 白山 旅游 < /ha> 
</div> 
< /div> 


任务 3 编写 "长 白 大 瀑布 " 子 容 器 代码 。 


<div data- role= "page" id "page3"> 
< div data- role= "header"> 
<hl> 长 白 大 瀑布 < /hi> 
</div> 
<div data- role= "content"> 
<p class= "img oenter"> < img src= "img/2.jpg> < /p> 
< 长 白山 奇峰 环绕 , 北 侧 天 文 峰 与 龙门 峰之 间 有 一 缺口 ,池水 由 此 缺口 溢出 , 穿 流 在 悬崖 峭 
壁 之 间 的 乘 搓 河 向 北 流 经 1250 米 处 的 断崖 飞 流 直下 ,以 雷霆 万 钩 之 势 ,夹带 着 震 天 的 吼声 ， 
跌 向 深 深 的 谷底 ,形成 落差 68 米 高 的 瀑布 ,这 就 是 蔚 为 壮观 的 长 白 瀑布 , 它 是 长 白山 的 第 一 
名 胜 。< /p> 
<p><ahref= 嘎 " data- rel= "pack*> 返 回 </a>< /p> 
</div> 
< div data- role= "footer"> 
<h4> 长 白山 旅游 < /h4> 
</div> 
</div> 
任务 4 设置 图 片 CSS 样式 。 前 面 已 经 介绍 ,不 再 袭 述 。 
任务 5 在 浏览 器 中 进行 测试 ,结果 如 图 8-5 所 示 。 


823 制作 可 折 受 内 容 页 面 


制作 “长 白山 景点 赏析 ”网 站 ,如 图 8-8 所 示 。 单 击 “ 长 白山 天 池 ”, 显 示 关 于 天 池 的 相关 
信息 。 再 次 单 击 , 则 隐藏 其 内 容 。 


【知识 基础 】 


通过 单 击 或 触摸 来 显示 或 隐藏 可 折 全 内容 ,在 网 站 上 经 常 看 到 这 种 行为 。 通 常 在 这 些 网 
站 中 ,可 折 且 内容 表现 为 一 个 标题 可 见 的 问题 或 答案 ,其 侧 边 的 “十 ”或 “一 ”表示 打开 或 关闭 。 

1 可 折 又 的 内 容 块 

要 创建 可 折 释 的 内 容 块 ,需要 添加 一 个 包含 可 折 释 内 容 的 容器 ,并 将 该 容器 元 素 属 性 定 
为 data-role 一 "collapsible" 。 

可 以 折 生 内 容 在 标题 栏 中 显示 一 个 “十 ?或 “一 ”, 表 示 其 折 释 状态 。 必 须 在 折 释 容器 内 
容 中 包 行 hl、h2、h3、h4、h5、h6 标签 以 使 其 折 倒 内 容 显示 或 隐藏 。 折 全 内 容 可 以 含有 任意 
的 HTML 标记 。 


< div data- roler "collapsible"> 
<hl> 标 题 < /hl> 
< 访 折 全 内 容 < /p> 


</div> 


长 白山 景点 赏析 


@ 长 白山 天 池 


名 长 白 大 浊 布 
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长 白山 景点 赏析 


@ 长 白山 天 池 


天 池 像 一 块 瑰丽 的 匠 玉 镇 该 在 雄伟 
群 峰之 中 ， 它 是 中 国 最 高 最 大 的 高 
柔 美的 天 池 白 云 绊 绕 , 五 色 斑 漳 , 波 : 
群 峰 环 抱 ,而 为 壮观 ， 


加 长 白 大 湿布 


长 白山 旅游 


该 内 容 是 


collapsed 


可 折 生 区 块 


状 认 隐藏 的 ， 
"false" 属 性 ,如 图 8-10 所 示 。 


图 8-8 


如 图 8-9 所 示 。 


可 折 胎 区 块 


图 8-9 隐藏 折叠 内 容 


“长 白山 景点 赏析 ”网 站 


如 需 在 页 面 加 载 时 显示 扩展 内 


可 折 双 区 块 


容 , 使 用 data 


© 标题 


折合 内 容 


可 折 胎 区 块 


图 8-10 ”显示 折 丢 内 容 


<div data- role= "collapsible" data- collapsed= "false"> 


<hl> 标 题 < /hl> 
< 户 折 全 内 容 < /p> 
</div> 
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176 ， 


折 重 块 旋 套 


© 标题 
侣 其 穴 块 标题 


旋 套 块 内 容 


折 生 块 该 套 


图 8-11 由 套 折 县 块 


2 嵌 套 可 折 又 块 
折 县 块 内 容 可 以 内 套 折 释 块 ,其 遵循 与 其 他 可 折 释 
完全 相同 的 规则 ,如 图 8-11 所 示 。 


[El 


<div data- role= "collapsible"> 
<h3> 标 题 < /hb3> 
< 
<div data- role= "collapsible"> 
<h3> 嵌 套 块 标题 < /h3> 
< 了 央 套 块 内 容 < /p> 
</div> 
</p> 
</div> 


3 可 折 释 集合 

除了 可 以 添加 多 个 可 折 芋 块 外 ,还 可 以 添加 可 折 双 集 
合 。 可 折 芋 集合 指 的 是 被 组 合 在 一 起 的 可 折 释 块 。 通 过 
添加 data-role 王 "collapsible-set" 属 性 使 新 容器 来 包装 这 
些 可 折 释 块 。 因 此 ,也 可 以 把 这 个 新 容器 称 为 包装 器 。 


<div data- role= "collapsible_ set"> 
<div data- role= "collapsible"> 


<h3> 标 题 < /h3> 

< 户 内 容 < /p> 
</div> 
<div data- role= "col lapei 

<h3> 标 题 < /h3> 

< 户 内 容 < /p> 
</div> 


< div data- role= "oollapsible" data- oollapeed- "true"> 


<h3> 标 题 < /h3> 
< 了 内 容 < /p> 
</div> 
</div> 


页 面 浏 览 效 果 如 图 8-12 所 示 。 


【任务 实施 】 


案例 
任务 1 


< div data- role= "page" id- "page"> 
< div data- role= "header"> 
<h2> 长 白山 景点 赏析 < /bh2> 


</div> 


制作 “长 白山 景点 赏析 ”网 站 。 
添加 页 面容 器 ,并 设置 标题 和 页 脚 。 | 


" cata- oollapeed= "true"> 


图 8-12 可 折 释 集合 


第 8 章 移动 产品 册页》 


<div data- role= "coontent"> 
内 容 
< /div> 
<div data- role= "footer"> 
<h4> 长 白山 旅游 < > 
</div> 
< /div> 


任务 2 添加 可 折 秋 块 区 块 ,并 编写 可 折 释 块 内 容 。 


<div data- role= "collapsible"> 
<h3> 长 白山 天 池 < /h3> 
<P class= "img oenter"> < img src= "img/1.jpg'> < /p> 
<E> 天 池 像 一 块 瑰丽 的 莫 玉 镶嵌 在 雄伟 的 长 白山 群 峰之 中 , 它 是 中 国 最 高 最 大 的 高 山 湖泊 。 和 柔 
美的 天 池 和 白云 综 绕 , 五 色 斑 逆 ,波光 岚 影 , 群 峰 环抱 , 蔚 为 壮观 ….< /p> 

< /div> 

<div data- role= "collapsible"> 
<h3> 长 白 大 瀑布 < /h3> 
<P class= "img oenter"> < img src= "img/2.jpg'> < /E> 
< 队长 白山 奇峰 环绕 , 北 侧 天 文 峰 与 龙门 峰之 间 有 一 缺口 ,池水 由 此 缺口 溢出 , 穿 流 在 悬崖 峭壁 之 
间 的 乘 搓 河 向 北 流 经 1250 米 处 的 断崖 飞 流 直下 ,以 雷霆 万 钧 之 势 ,夹带 着 震 天 的 吼声 , 跌 向 深 深 
的 谷底 ,形成 落差 68 米 高 的 瀑布 ,这 就 是 蔚 为 壮观 的 长 白 瀑布 , 它 是 长 白山 的 第 一 名 胜 。< /p> 

< /div> 

任务 3 设置 图 片 CSS 样式 。 前 面 已 经 介绍 ,不 再 袭 述 。 

任务 4 在 浏览 器 中 进行 测试 ,结果 如 图 8-8 所 示 。 


8.3 网 站 导航 栏 设计 


创建 移动 网 站 可 能 会 应 用 到 工具 栏 ,工具 栏 常用 于 网 页 的 页 眉 和 页 脚 部 分 。 在 移动 网 
站 中 ,不 是 每 个 页 面 都 需要 使 用 工具 栏 , 但 是 工具 栏 确实 非常 好 用 。 网 站 经 常 使 用 页 脚 工具 
栏 来 放置 导航 区 ,让 网 站 更 有 移动 应 用 的 感觉 。 通 过 包含 固定 的 页 眉 或 页 脚 工具 栏 ,允许 用 
户 能 立即 访问 网 站 中 的 重用 选项 和 链接 ,并 且 不 用 拖 动 滚动 条 来 寻找 想 要 的 链接 。 


831 制作 导航 工具 栏 
制作 “ 悠 优 旅游 "网 站 导航 工具 栏 ,如 图 8-13 所 示 。 
【知识 基础 】 


1 创建 链接 按钮 

按钮 在 移动 网 站 中 应 用 非常 广泛 ,通过 单 击 按钮 进行 页 面 跳 转 。 链 接 按 钮 是 使 用 二 a 二 
元 素 data-role 属性 来 创建 的 。 通 过 先 创建 链接 ,然后 设置 data-role 二 "button" 属 性 来 实现 。 
这 种 方式 不 是 创建 一 个 真实 的 按钮 元 素 , 而 是 使 用 链接 样式 使 链接 显示 成 按钮 形式 。 


<ahre 全 嘎 " data- role= "button"> 按 钮 < /a> 


{pm 
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ma 
默认 情况 下 ,按钮 外 观 为 圆 角 有 带 阴 影 , 这 种 统一 的 外 观 对 于 页 面 设 计 而 言 并 不 是 最 
佳 选择 ,我 们 可 以 通过 改变 按钮 的 属性 重新 进行 外 观 设置 。 
<ahref- 啡 " data- role= "button" data- comers= "false"> 按 钮 < /a> 
通过 设置 data-corners 王 "false" 属 性 实现 按钮 由 圆 角 变 为 方 角 。 
<a href= 啡 " data- role= "button" data- shadow= "false"> 按 钮 < /a> 


通过 设置 data-shadow 王 "false" 属 性 实现 移 除 按钮 阴影 。 
下 面 是 创建 链接 按钮 并 改变 默认 设置 的 代码 ,页 面 浏览 如 图 8-14 所 示 。 


< div data- role= "content"> 
<a href= 啡 " data- role= "button"> 默认 按 钮 < /a> 
<a href- 啡 " data- role= "button" data- comers= "false"> 方 角 按钮 < /a> 
<a href= 啡 "data- role= "button" data- shadow= "false"> 移 除 阴影 < /a> 
</div> 


ET 


button 


默认 按钮 


方 角 按钮 


图 8-13 “ 悠 优 旅 游 " 导 航 栏 图 8-14 链接 按钮 及 其 外 观 


2 给 按钮 添加 图 标 

为 了 使 按钮 外 观 更 加 丰富 ,可 以 给 按钮 添加 图 标 。jQuery Mobile 附带 了 一 套 内置 的 图 
标 , 可 以 在 按钮 上 使 用 这 些 图 标 , 有 助 于 提高 按钮 的 设计 样式 。 

<a href- 啡 " data- role= "button" data- icon= "home"> 首 页 </a> 

通过 设置 data-icon 属性 ,将 指定 图 标 添加 到 按钮 上 ,data-icon 属性 值 详细 描述 如 
表 8-3 所 示 。 

表 8-3 data-icon 属性 值 描述 
属 性 值 描 述 属 性 值 描 述 


data-icon= "arrow-l" 左 箭头 data-icon= "info" 信息 
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+ Wg 
属 性 什 描述 属 性 值 描述 
data-icon= "arrow-r" 右 箭头 data-icon= "grid" 网 格 
data-icon= "arrow-u" 上 箭头 data-icon= "gear" 齿轮 
data-icon= "arrow-d" 下 箭头 data-icon= "search" 搜索 
data-icon= "plus" 加 号 data-icon= "back" 后 退 
data-icon= "minus" 减 号 data-icon= "forward" 向 前 
data-icon= "delete" 删除 data-icon= "refresh" 刷新 
data-icon= "check" 检查 data-icon= "star" 星 
data-icon= "home" 首页 data-icon= "alert" 提醒 


通过 设置 data-icon 属性 可 以 把 图 标 添 加 到 按钮 上 。 默 认 状 态 下 图 标 放 置 在 按钮 的 左 
边 ,通过 data-iconpos 属性 改变 图 标 在 按钮 上 的 位 置 。 


<a href= 嘎 " data- role= "button" data- icon= "home" data- iconpos= "top"> 首 页 < /a> 


data-iconpos 属性 值 可 以 为 left( 在 按钮 左边 )、right( 在 按钮 右边 )、top( 在 按钮 上 边 )、 
bottom( 在 按钮 下 边 ) 和 notext( 只 显示 图 标 , 不 显示 按钮 ) 。 
下 面 代码 实现 给 链接 按钮 添加 图 标 ,页 面 浏览 如 图 8-15 所 示 。 


<div data- role= "content"> 
<a href= 啡 "datar- role= "button" data- ioon= "home" data- ioonpos= "top"> 首 页 < /a> 


<a href= 啡 "datar- role= "button" data- icon= "forward" data- ioonpos= "left"> 向 前 < /a> 


<a href= 啡 "datar role= "button" data- icon= "back" data- iconpos= "right"> 向 后 < /a> 


<a href= 啡 "datar- role= "button" data- ioon= "seardh" data- iconpos= "bottat> 搜 索 </a> 


</div> 


3 添加 页 眉 工 具 栏 


页 眉 通常 包含 标题 (或 Logo) 或 一 个 到 两 个 按钮 (通常 是 首页 .选项 或 搜索 按钮 )。 可 以 


在 页 眉 左 侧 或 右 侧 添加 按钮 。 


下 面 的 代码 ,将 向 页 眉 标题 文本 的 左 侧 和 右 侧 各 添加 一 个 按钮 ,如 图 8-16 所 示 。 


<div data- role= "header"> 
<ahref- 啡 " data- role= "button"> 左 侧 按钮 < /a> 
<ahref- 啡 " data- role= "button"> 右 侧 按钮 < /a> 


<h2> 标 题 < /> 
</div> 
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图 8-15 给 按钮 加 图 标 图 8-16 ”添加 页 眉 工 具 栏 


给 页 眉 添 加 链接 时 ,无 须 在 二 a 二 中 设置 data-role 二 "button" 属 性 。 上 默认 情 况 下 ,工具 
栏 中 的 链接 会 自动 转换 为 按钮 。 

页 眉 工 具 栏 最 多 能 添加 两 个 按钮 ,第 一 个 链接 总 是 默认 显示 在 页 眉 工 具 栏 的 左 侧 ; 第 二 
个 链接 默认 显示 在 页 眉 工具 栏 的 右 侧 。 两 个 链接 在 标题 元 素 之 前 或 之 后 都 没有 关系 。 

4 添加 导航 工具 栏 

导航 栏 由 一 组 水 平 排列 的 链接 构成 ,通常 位 于 页 眉 或 页 脚 内 
的 链接 会 自动 转换 为 按钮 ,无 须 设置 data-role 二 "button” 有 
属性 。 

使 用 data-role 二 "navbar" 属性 来 定义 导航 栏 。 在 这 
个 容器 内 部 ,必须 有 一 个 无 序列 表 , 其 每 个 列 在 一 个 二 li 二 
元 素 之 中 。 如 图 8-17 所 示 。 


<div data- role= "header"> 
<h2> 标 题 < /> 
<div data- role= "navbar"> 
<U> 
<li><ahref="#" MmyLink /a>< /1i> 
<li><ahref="#" MmyLink /a>< /1i> 
<li><ahref="#"> MmyLink< /a>< /1i> 
</ul> 
</div> 


</div> 


按钮 的 宽度 使 用 无 序列 表 来 均等 地 划分 。 一 个 按钮 图 8-17 导航 工具 栏 
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占据 100% 的 宽度 ;两 个 按钮 各 分 享 50% 的 宽度 ;三 个 按钮 各 占 33. 3%, 以 此 类 推 。 不 过 ， 
如 果 在 导航 栏 中 规定 了 五 个 以 上 的 按钮 ,那么 导航 栏 会 变 为 多 行 显示 ,所 以 导航 栏 一 行 最 多 
显示 5 个 按钮 。 


【任务 实施 】 


案例 制作 * 悠 优 旅游 "导航 栏 。 
任务 1 添加 页 面容 器 ,并 设置 页 面 标题 。 


<div data- role= "page" idF "page"> 
<div data- role= "header"> 
<h2> 悠 优 旅游 < /h2> 
</div> 
<div data- role= "oontent"> 
</div> 
< /div> 


任务 2 制作 页 眉 工具 栏 , 添 加 2 个 按钮 ,并 添加 按钮 图 标 及 设置 图 标 显示 位 置 。 


<div data- role= "header"> 
<a href= "# " data- iconr "hame"> Homepage< /a> 
<a href= # " data- ioon= "search"> Seardx /a> 
<h2> 悠 优 旅游 < /h2> 

</div> 


任务 3 制作 导航 栏 。 
< div data- role- "header"> 


<a href= "# " data- ioon= "hame"> Homepage< /a> 
<a href= "#" data- ioon= "seardh"> Seardhx /a> 


<hz> 悠 优 旅游 < /b> NBA 数据 王 
<div data- role= "navbar"> 
<u> Es 
<li><a href= 哇 心 周末 游 </a>< /li> 
<li><ahre 全 啡 性 出 境 游 </a>< /li> boil 
<li><a hre 伍 哇 人 景点 < /a>< /li> a 
<li><a hre 握 哇 吃 酒店 </a>< /li> 
<li><ahre 伯 哇 吃 机 票 </a>< /li> 
ee 人 44 
</div> 
</div> 
任务 4 浏览 测试 。 页 面 效 果 如 图 8-13 所 示 。 
832 制作 固定 导航 栏 


制作 “NBA 数据 王 ” 网 站 固定 导航 栏 ,如 图 8-18 所 示 。 
浏览 该 页 面 时 ,导航 栏 始 终 位 于 页 面 可 视 区 域 底部 。 图 8-18 “NBA 数据 王 ” 导 航 栏 


TS 制作 一 HM Cs+jiQey 


ts9) 


【知识 基础 】 


1 添加 页 脚 工具 栏 

与 页 眉 工具 栏 一 样 ,通过 在 容器 元 素 添加 data-role 二 "footer" 属 性 来 创建 页 脚 工具 栏 ， 
但 是 页 眉 与 页 脚 工具 栏 也 有 区 别 。 页 脚 工具 栏 不 会 自动 格式 化 其 中 的 链接 ,必须 通过 使 用 
自 定义 样式 ,布局 网 格 、navbar、controlgroup 来 手动 完成 。 与 页 眉 相 比 ,页 脚 更 具 伸缩 性 ， 
更 实用 且 多 变 , 因 此 能 够 包含 所 需 数量 的 按钮 。 Sl E21 


< div class= mui- bar" data- role= "footer"> 
<a hre 人 - 啡 "data- role= "button"> AnyLinks< /a> 
<a hreE- 啡 "data- role= "button"> AnyLinks< /a> 
<a href= 啡 "data- role= "button"> AnyLinks< /a> 

</div> 

添加 class 二 "ui-bar" 样 式 ,可 以 给 页 脚 工 具 栏 增加 补 
白 。 由 于 页 脚 工具 栏 不 会 自动 格式 化 其 中 的 链接 ,所 以 需 
要 通过 data-role 二 "button" 属 性 将 链接 设计 成 按钮 。 效 果 
如 图 8-19 所 示 。 

如 图 8-19 所 示 , 页 脚 工 具 栏 有 3 个 按钮 ,互相 之 间 并 排 
显示 。 这 种 情况 也 可 以 通过 给 其 应 用 控制 组 
(controlgroup) 来 实现 。 控 制 组 是 包含 这 些 按 钮 的 容器 , 通 
过 控制 组 容器 使 这 些 分 散 的 按钮 组 成 一 个 分 割 成 多 个 部 分 
的 长 按钮 。 图 8-19 添加 页 脚 工具 栏 按钮 

<div class= ui- bar" data- roler "footer"> 

<div data- role= "controlgroup" data- type= "horizontal"> 
<a href= 嘻 " data- roler "button"> AnyLinks< /a> 
<a href= 嘻 " data- roler "button"> AnyLinks< /a> 
<a href= 哮 " data- roler "button"> AnyLinks< /a> 
</div> 

</div> 

控制 组 容器 内 的 按钮 所 应 用 的 样式 ,如 图 8-20 所 示 。 

通过 图 8-19、 图 8-20 可 以 看 出 ,两 种 方式 设计 的 按钮 都 没有 居中 对 齐 , 使 用 datarrole 一 
"navbar" 属 性 定义 页 脚 栏 可 以 解决 这 个 问题 。 


<div data- role= "footer"> 
<div data- role= "navbar"> 
<Ul> 
<li><ahref="#" MmyLink /a></li> 
<li><ahref="#"> MmyLink< /a>< /1i> 
<li><ahref#" MmyLink /a>< /li> 
</ul> 
</div> 
</div> 


第 8 章 移动 产品 网 页 设计 


页 脚 工具 栏 与 页 眉 工 具 栏 中 使 用 navbar 的 方法 相同 。 在 navbar 容器 内 部 ,必须 有 一 
个 无 序列 表 , 其 每 个 列 在 一 个 二 li 二 元 素 之 中 ,页 面 效 果 如 图 8-21 所 示 。 


Anylinks = AnyLinks = AnyLinks Anytink Anytink AnyLink 


图 8-20 ”控制 组 容器 内 按钮 样式 图 8-21 navbar 容器 按钮 样式 


2 固定 定位 工具 栏 

遵循 Web 开发 标准 ,工具 栏 放置 在 内 容 区 域 的 前 面 或 后 面 。 但 有 时 用 户 希 望 页 眉 或 页 
脚 工 具 栏 时 时 可 见 , 这 时 我 们 可 以 对 工具 栏 使 用 固定 的 定位 方式 。 

当 使 用 固定 定位 时 ,jQuery Mobile 会 检查 定位 的 工具 栏 是 否 已 经 在 可 视 范 围 中 。 如 果 


不 在 可 视 范 围 , 则 将 会 把 工具 栏 插入 可 视 区 的 顶部 或 底部 EEzE 全 B2145 
(取决 于 页 眉 工具 栏 还 是 页 脚 工具 栏 )。 要 使 工具 栏 固定 定 ba 


位 ,可 以 将 data-position 二 "fixed" 属 性 添加 到 页 眉 或 页 脚 | 旺 


容器 中 。 


< div data- role= "footer" data- positior= "fixed"> 
<div data- role= "navbar"> 
<U> 
<li><ahref"#" MmyLink /a>< /1i> 
<li><ahref="#" MmyLink< /a>< /1i> 
<li><ahref="#'"> MmyLink< /a>< /1i> 
</ul> 
</div> 
</div> 


上 面 代码 实现 了 使 页 脚 工 具 栏 固定 定位 ,无 论 页 面 内 


容 区 域 篇 幅 多 长 ,页 脚 工 具 栏 始终 处 于 可 视 区 域 底部 ,如 
图 8-22 所 示 。 图 8-22 固定 定位 页 脚 工具 栏 


183 


so 


184 ， 


【任务 实施 】 


案例 ”制作 “NBA 数据 王 ” 导 航 栏 。 
任务 1 添加 页 面容 器 ,并 设置 页 面 标题 。 


< div data- role= "page" id- "page"> 
< div data- roler "header"> 
<hl> NBA 数据 王 < /> 
</div> 
< div data- role= "oontent"> 
</div> 
<div data- role= "footer"> 
<h4> 页 脚 < /h4> 
</div> 
< /div> 


任务 2 制作 页 脚 导 航 栏 。 


<div data- role= "footer" data- Position= "fixed"> 
<div data- role= "navbar"> 
<Ul> 
<1li><a href- "page.html" class= "ui-bar-b> 得 分 </a></li> 
<1li><ahre 全 啡 必 篮 板 </a></]li> 
<li><ahre 全 啡 性 助 攻 < /a>< /li> 
<1li><ahref- 嘎 悄 盖帽 < /a>< /Li> 
<li><ahre 全 嘎 必 抢断 </a></l1i> 
</al> 
</div> 
</div> 


任务 3 编辑 页 面 内 容 区 域 。 


< div data- role= "content"> 
< img sro- "img/hd.png" width= "220" height— "350"> 
<p> < img src= "img/HOU 10go.png" width= "50" height= "50"> < /p> 
<p class= "f21"> 詹 姆 斯 <br> 哈 登 < /p> 
< 户 后 卫 / 火 箭 < /p> 
<p class= "f45"> 44< /p> 
</div> 


任务 4 添加 CSS 样式 。 


< style type= "text/css"> 
211{ 
font- size: 21px; 
olor: # 333; 
margin- top: 100px; 


</style> 


任务 5 浏览 测试 ,页 面 效 果 如 图 8-18 所 示 。 


8.4 使 用 布局 网 格 


制作 ”出境 游 "页 面 , 如 图 8-23 所 示 。 页 面 主 要 由 页 眉 
导航 栏 页 脚 导航 栏 和 内 容 区 域 组 成 。 其 中 页 眉 由 标题 和 
带 图 标的 导航 栏 构 成 ,页 脚 栏 为 固定 定位 导航 栏 ,页 面 内 
容 由 4 个 区 块 组 成 ,按照 2 行 2 列 进行 布局 。 

【知识 基础 】 

网 格 是 用 于 页 面 布局 的 。jQuery Mobile 提供 了 一 套 
基于 CSS 的 网 格 布局 方案 ,允许 创建 多 个 相同 宽度 的 列 。 
不 过 ,由 于 移动 设备 的 屏幕 宽度 所 限 ,一般 不 推荐 在 移动 
设备 上 使 用 列 布局 。 但 是 有 时 需要 定位 更 小 的 元 素 , 如 按 
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钮 或 导航 栏 ,就 像 在 表格 中 那样 并 排 分 布 。 这 时 , 列 布局 pel tee 
就 恰如其分 。 2 更 到 
网 格 中 的 列 是 等 宽 的 (总 宽 是 100%) ,无 边框 背景 、 
2 - 丙 线 路。 甫 听 执 结 。 加 让 本 。 二 
外 边 距 、 内 边 距 。 可 使 用 的 布局 网 格 有 四 种 ,如 表 8-4 
所 示 。 图 8-23 “出 境 游 ”页 面 
表 8-4 布局 网 格 四 种 类 型 说 明 
网 格 类 列 列 宽 度 对 应 区 块 
ui-grid-a 2 50%/50% ui-block-alb 
ui-grid-b 3 33%/33%/33% ui-block-alble 
ui-grid-c 4 25%/25%/25%/25% ui-block-alblcld 
ui-grid-d 5 20%/20%/20%/20%/20% uirblock-alblcldle 


提示 : 在 列 容器 中 ,根据 不 同 的 列 数 , 子 元 素 可 设置 类 uirblock-alblcldle。 这 些 列 将 


依次 并 排 浮动 。 
841 两 列 布局 
下 面 代码 的 作用 是 创建 两 列 布局 网 格 。 


‘ ”Cb 前 端 设 计 与 制作 一 -HTM+ CSS+jQuery 
186 
- <div class= ui- grid- ar> 
<div class= "ui-block ar> 区 块 1,1< /div> 
<div class= "ui-block-b"> 区 块 1,2< /div> 
</div> 
定义 一 个 ui-grid-a 类 容器 ,代表 创建 两 列 网 格 ,每 列 宽度 都 是 50% ;ui-grid-a、ui-grid-b 
分 别 代表 两 个 区 块 , 页 面 浏览 如 图 8-24 所 示 。 


842 三 列 布局 
下 面 代码 的 作用 是 创建 三 列 布局 网 格 。 


<div class= "ui- grid- b"> 
<div class= "ui- block-a"> 区 块 1,1< /div> 
<div class= "ui- block-b"> 区 块 1,2< /div> 
<div class= "ui- block- c"> 区 块 13c /div> 
</div> 


定义 了 一 个 ui-grid-b 类 容器 ,代表 创建 三 列 网 格 ,每 列 宽度 都 是 33% ;ui-grid-a、 ui- 
grid-b ui-grid-c 分 别 代 表 3 个 区 块 ,页 面 浏 览 如 图 8-25 所 示 。 


两 列 布局 
区 块 11 区 块 12 区 块 11 区 块 12 区 块 13 
图 8-24 两 列 布局 网 格 图 8-25 三 列 布局 网 格 


843 多 行 多 列 布局 
下 面 代码 的 作用 是 创建 两 行 三 列 布局 网 格 。 


<div class= mui- grid-b"> 
<div class= "ui- block-a"> 区 块 1,1< /div> 
<div class= "ui-block-b"> 区 块 1,2< /div> 


<div class= "ui-block- c> 区 块 1,3c /div> 
<div class= ui-blocke ar> 区 块 2,1< /div> 
<div class= "ui-bloce-b> 区 块 2,2< /div> 
<div class= ui-block cr> 区 块 2,3 /div> 
</div> 
定义 了 一 个 ui-grid-b 类 容器 ,代表 创建 两 行 三 列 网 格 ， 
每 列 宽度 都 是 50%; ui-grid-a、 ui-grid-b、 ui-grid-c、 ui-grid-a、 
uirgrid-b、uirgrid-c 分 别 代表 6 个 区 块 。 每 行 第 一 个 容器 设 
置 为 class 二 "ui-block-a" 来 清除 浮动 ,如 图 8-26 所 示 。 


【任务 实施 】 


案例 ”制作 “出 境 游 ”页 面 。 
任务 1 添加 页 面容 器 ,并 设置 页 面 标题 。 


<div data- role= "page" id= "page"> 
<div data- role= "header"> 
<h2> 悠 优 旅游 < /h2> 
</div> 
<div data- role= "oontent"> 
</div> 
< /div> 
任务 2 制作 页 眉 导航 栏 。 通 过 data-icon 二 "check" 
属性 给 导航 栏 加 图 标 , 默 认 图 标 在 文字 上 方 。 
<div data- role= "header"> 
<h2> 悠 优 旅游 < /h2> 
<div data- role= "navbar"> 
<uUl> 
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多 行 多 列 
区 块 1,1 区 块 12 区 块 13 
区 块 2,1 区 块 22 区 块 23 


图 8-26 ”两 行 三 列 布局 网 格 


<1li><a href= 叶 "data- icon= "gear"> 周 末 游 < /a> < /1i> 
<li><a hre 人 = 嘲 " class- "ui-bar-p" data- icom "dhece> 出 境 游 </a></1i> 
<1li><ahref- 嘎 " data- iconr "grid> 景 点 </a></li> 

<li><ahre 人 嘎 " data- icon= "star"> 酒 店 < /a>< /li> 


<1li><ahre 全 嘎 " data- icon= "info> 机 票 </a>< /li> 


</al> 
</div> 
</div> 


浏览 页 面 ,效果 如 图 8-27 所 示 。 


任务 3 制作 页 脚 导航 栏 。 通 过 data-position= "fixed" 属 性 进行 页 脚 位 置 固定 。 


< div data- roler "footer" data- Positionr "fixed"> 
<div data- role= "navbar> 
<ul> 
<li><a hre 伍 哇 吃 预订 线路 < /a>< /li> 


Wb 前 端 设 计 与 制作 一 -HTML+ CSS+jQery 
188 ， 
<1li><ahreE- 啡 必 客服 热线 </a></i> 
<li><ahre 伍 哇 吃 留言 本 </a></li> 
<1li><ahre 全 啡 > 线 路 检索 </a></]Li> 
</al> 
</div> 
</div> 


图 8-27 添加 页 眉 导航 栏 效果 图 8-28 添加 页 脚 导航 栏 效果 


浏览 页 面 ,效果 如 图 8-28 所 示 。 
任务 4 添加 两 行 两 列 的 布局 网 格 。 


<div data- role= "content"> 
<div class= "ui- grid-a™> 
<div class- "ui- block- a"> 区 块 ak /div> 
<div class= "ui-block-b"> 区 块 Bx /div> 


<div class= "ui-block- a> 区 块 cx /div> 

<div class= "ui-block- b> 区 块 pc /div> | 

</div> 
</div> 


浏览 页 面 ,效果 如 图 8-29 所 示 。 
任务 5 编辑 区 块 A。 


< div class= mui- block a"> 
<P>< img src= "img/hk.jpg"> 
< pan class= "fl4> 上 海 直 飞 香 港 4 天 往返 < /span> 
2015 年 03 月 10 日 结束 <br> 
< 图 8-29 ”添加 布局 网 格 后 效果 


预订 线 小 。。” 吉 服 热 绪 鲜 言 本 后 熙 检 过 
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</div> 


任务 6 添加 CSS 样式。 


< style type= "text/css"> 
img { 
width: 100%; 


width: 94%; 

Jine height: 20px; 
text- align: oenter; 
font— size: 12px; 
color: # 666; 

border: lpx solid# Cocy 


} 
.£18 { 
font- size: 18px; 
font- weight: bold; 网 未 罗 出 对 有 
color: # FO00; 区 块 B 
} 
-£141{ | 
font- size: 14rx; 和 
Color: #000; 799 元 中 
pi Diels 区 块 C 区 块 D 
} 
< /style> 
浏览 页 面 ,效果 如 图 8-30 所 示 。 
任务 7 重复 任务 5 的 操作 ,编辑 区 块 BB 区 块 C 和 区 
块 D。 整 个 内 容 区 代码 如 下 所 示 。 
< div data- role= "content"> 预订 线路 客服 热线 导言 本 线路 检察 
图 8-30 区 块 A 加 样式 后 效果 


<div class= ui- block ar> 
<P>< img src= "img/hk.jpg"> 
<span class= "fl4"> 上 海 直 飞 香港 4 天 往返 < /span> 
2015 年 03 月 10 日 结束 <br> 
< span class= "fl8"> 799 < /spar> 元 起 < /p> 
</div> 
< div class= ui-blocke b"> 
<p> < img src= "img/jp.jpg"> < span class= "fl4"> 上 海 直 飞 东京 10 天 往返 </span> 2015 年 
02 月 15 日 结束 <br> 
< span class= "fl8"> 2150 < /span> 元 起 < /p> 


‘ 人 人 作 一 HIM+CSjaey 


</div> 

<div class= ui-block ar> 
<p> < img src= "img/kor.jpg"> < span class= "fl4"> 天 津 直 飞 首尔 5 天 自由 行 < /span> 2015 
年 03 月 08 日 结束 <br> 
< span class= "f18"> 1999 < /span> 元 起 < /p> 

</div> 

< div class= "ui— block- b> 
<p>< img src= "img/t1.jpg"> < span class= "fl4"> 杭 州 直 飞 曼谷 6-7 日 往返 
</span> 2015 年 4 月 05 日 结束 <br> 
< span class= "f18"> 79% /spar> 元 起 < /p> 

</div> 

</div> 
</div> 


任务 8 浏览 测试 ,页 面 效果 如 图 8-23 所 示 。 
8.5 创建 列表 视图 


列表 作为 移动 Web 页 面 中 最 重要 ,使 用 频率 最 高 的 组 件 , 其 主要 功能 是 实现 展示 数据 、 
导航 结果 列表 ,数据 条 目 等 。jQuery Mobile 提供 了 多 种 的 列表 类 型 以 适应 大 多 数 的 设计 
模式 。 


851 制作 文字 列表 


利用 列表 视图 制作 “互联 网 资讯 ”页面 。 每 条 资讯 由 标题 描述 、 来 源 和 计数 器 构成 ,页 
面 布局 如 图 8-31 所 示 。 


【知识 基础 】 一 | 
1 标准 列表 2014 年 Cooale 的 野心 在 时 里 


2014 年 , Google 仍然 是 届 家 广告 公司 2014 年 年来, 有， “2 


jQuery Mobile 中 的 列表 视图 是 标准 的 HTML 列表 : 的 
有 序列 表 ( 二 ol 二 ) 和 无 序列 表 ( 二 ul 二 )。 如 需 创建 标准 列 | ;owns Re 和 a 响 
表 , 在 二 ul 过 元 素 中 添加 data-role 一 "listview" 属 性 就 可 以 |e 仆人 


E77 和 


实现 简单 的 无 序列 表 。 
拍 哲 微 店 转型 qq 直接 开店 
Pr 折 扩 和 让 是 训 东 入 团 帮 下 无 线 建 店 工具， 与 前 市 场 上 。 21 

<u data- role= "listview"> A 

<li><ahre 伍 嘎 心 页 面 </a></li> 

i><ahreE- 啡 。 互联 网 全 融 火爆 的 原因 

ST 于 吃 页 面 < /></1> 器 同 责 本 运 入 地 市 ， 股市 炎 ; 各 同 本 进入 器 产 , 房产 。 29 

<li><ahre 人 = 嘲 吃 页 面 </a></1i> i 
</al> 


为 险 苹 果 对 索尼 的 电影 没 兴趣 ? 

通过 定义 data-role 二 "listview" 属 性 实现 的 列表 ee - 
组 件 ,jQuery Mobile 会 自动 将 所 有 必需 的 样式 追加 到 
列表 上 ,以 便 在 移动 设备 上 显示 列表 效果 。 如 图 8-32 
所 示 。 8-31 “互联 网 资讯 "页面 
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2 文本 说 明 列 表 - 
文本 说 明 列 表 是 在 标准 列表 基础 上 ,通过 附加 文本 标题 和 描述 性 文字 形成 的 列表 。 文 
本 标题 通过 二 hl 二 至 二 h6 二 任意 一 个 标签 引入 ,文字 描述 通过 二 p 二 标签 引入 。 


<u data- role= "listview"> 
<li><ahref= 叶 > 
<h3> 文 本 标题 < /h3> 
< 户 文 字 描 述 < /p> 
</a></li> 
<1li><ahre 人 啡 吃 
<h3> 文 本 标题 < /h3> 
< 了 文字 描述 < /p> 
</a></li> 
<li><ahref=#'"> 
<h3> 文 本 标题 < /h3> 
< 户 文 字 描 述 < /p> 
</a></li> 
</aul> 


浏览 效果 如 图 8-33 所 示 。 


文本 说 明 列表 
亟 站 这 。 
mm © 
| mm © 文本 标题 © 
Za 
© 
| 
| 
| 
图 8-32 标准 列表 图 8-33 文本 说 明 列表 
3 计数 气泡 列表 


在 一 个 区 域 或 链接 内 显示 项 目 数据 是 一 些 短 信 、 邮 件 常 用 的 样式 。 计 数 气 泡 列 表 用 于 
显示 与 列表 项 相关 的 数目 。 在 标准 列表 基础 上 ,如 需 添 加 计数 气泡 ,使 用 行内 元 素 一 span 盖 
设置 class 二 "ui-li-count" 属 性 并 添加 数字 。 


sjey 


本 到 ) 


<ul data- role= "listview> 
<1li><ahre 人 -只 咱 页 面 < sban class= "ui- li- count"> 4 /spanr></a></li> 
<1li><ahre 人 只 吵 页 面 < sban class= "ui- li- count">2c /span></a></1i> 
<Jli><ahre 人 只 必 页 面 <span class= "ui- 1i- count"> 5 /span> </a></li> 
< /ul> 
浏览 效果 如 图 8-34 所 示 。 
【任务 实施 】 


案例 “制作 * 互 联网 资讯 "页 面 。 [于 
任务 1 “添加 页 面容 器 ,并 设置 页 面 标题。 


计数 气泡 列表 


5 


<div data- role= "page" id= "page"> 
<div data- role= "header"> 
<h2> 互 联网 资讯 < /h2> 
</div> 
<div data- role= "oontent"> 
</div> 
< /div> 


任务 2 添加 一 个 含有 5 个 列表 项 的 文本 说 明 列 表 。 


<ul data- role= "listview"> 
<li><ahref=#"> 
<h3> listl< /h3> 
<P> description< /p> 
</a></li> 


图 8-34 计数 气泡 列表 


</aul> 


浏览 页 面 ,效果 如 图 8-35 所 示 。 
任务 3 编辑 列表 项 。 
步骤 1 编辑 资讯 标题 ,文字 描述 、 来 源 、 计 数 气泡 等 。 
<1li> 
<h3><a hre 伍 叶 ">2014 年 Google 的 野心 在 哪里 < /a> < /h3> 
<p> 2014 年 ,Google 仍 然 是 那 家 广告 公司 2014 年 年 末 , 有 这 么 一 则 趣事 能 证 明 Google 这 几 年 的 强 
大 与 垄断 地 位 。< /p> 
<p class- "tline"> 来 源 : 互联 网 的 那 点 事 <p> 
< span class= "ui- 1i- oount"> 42< /span> 
<V/li> 


步骤 2 编辑 CSS 样式 。 
< style type= "text/css"> 
.tline { 
border- top- width: lpx; 
border top- style: dashed; 
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border_ top_ color: # 666; 
margin- top: Sx; 
Faddingr top: px; 
Padding- right: Sex; 
< /style> 


浏览 页 面 ,效果 如 图 8-36 所 示 。 


| list1 © 2014 年 Gooqle 的 野心 在 哪里 
deseription 2014 年 .Google 作用 于 家 广告 从 
来 源 : 互联 网 的 那 点 于 
we © i 
i 
| cescription © 
list3 
© 
gescnphon wa 
© 
ee © 和 
gescription © 
list5 
© 
descnipton, at 
in © 
图 8-35 添加 文本 说 明 列表 后 效果 图 8-36 列表 项 编辑 后 效果 


任务 4 重复 任务 3 的 操作 ,编辑 其 他 的 列表 项 。 整 个 列表 区 代码 如 下 所 示 。 


<ul data- role= "listview"> 

<1li> 
<h3><ahref- 嘎 必 2014 年 Google 的 野心 在 哪里 < /a> < /h3> 
<p> 2014 年 ,Google 仍然 是 那 家 广告 公司 2014 年 年 末 , 有 这 么 一 则 趣事 能 证 明 Google 这 几 年 
的 强大 与 垄断 地 位 。< /p> 
<p class= "tline"> 来 源 : 互联 网 的 那 点 事 <p> 
< span class= ui- 1i- oont"> 42< /span> < /1i> 

<li> 
<h3><a hre 伍 嘲 吃 油价 暴跌 跨 境 电 商 受 影响 < /a>< /h3> 
<P>2014 年 下 半年 油价 几 近 腰斩 ,分 析 人 士 指出 ,油价 未 来 将 在 60~ 80 美 元 的 较 低 范 
区 间 波 动 。< /p> 
<p class= "tline"> 来 源 : 亿 邦 动力 网 <p> 
< span class= "ui- 1i- oont"> 15< /span> < /1i> 

<1li> 
<h3><a hre 伍 啡 > 拍 拍 微 店 转型 qq 直接 开店 < /a>< /h3> 
< 户 拍 拍 微 店 是 京东 集团 旗下 无 线 建 店 工具 ,与 目前 市 场 上 其 他 手机 开店 应 用 不 同 。< /> 


Ee 
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od <p class= "tline"> 来 源 : 互联 网 的 那 点 事 <p> 

< span class= "ui- 1i- oount"> 21< /span>< /li> 

<1i> 
<h3><a hre 全 嘲 吃 互联 网 金融 火爆 的 原因 < /a> < /h3> 
< 户 民 间 资 本 进入 股市 ,股市 火 ;民间 资本 进入 房产 ,房产 火 ; 民 间 资 本 炒 黄金 ,黄金 火 …… 互 
联网 金融 真 的 能 火 吗 。< /p> 
<p class= "tline"> 来 源 : 创业 邦 <p> 
< span class= "ui- 1]i- count"> 2% /span> < /1i> 

<1i> 
<h3><a hre 记 嘲 吃 为 喻 苹果 对 索尼 的 电影 没 兴趣 < /a> < /h3> 
< 访 它 存在 的 目的 是 为 了 让 科技 变 得 更 加 完善 ,而 不 是 开天辟地 地 试 水 。< /p> 
<p class= "tline"> 来 源 :雷锋 网 <p> 
< span class= "ui- 1i- oount"> 26< /span> < /1i> 

</o> 


任务 5 浏览 测试 ,页 面 效 果 如 图 8-31 所 示 。 
852 制作 图 文 列表 

制作 “知名 酒水 项 目 ”" 页 面 ,如 图 8-37 所 示 。 
【知识 基础 】 


当 设 计 一 个 列表 时 ,可 能 希望 列表 中 的 每 个 项 目 包 含 
-个 图 标 或 缩 略 图 。 利 用 jQuery Mobile 提供 的 列表 组 件 


知名 酒水 项 目 


史玉柱 牵手 五 粮 液 ， 功能 白酒 ~ © 


投 列 金 开 ; 20~-30 万 | 2007 人 已 咨询 


泸州 老 究 直 营 品 牌 ， 抢 到 即 赚 。 @y 


投 责 金 罗 ; 10~20 万 | 1835 人 已 刘 调 


是 很 容易 实现 的 。 sam 0 
1 列表 缩 略 图 


缩 略 图 是 一 幅 完 整 尺寸 图 片 的 预览 或 缩小 的 版 本 。 
缩 略图 可 以 包含 在 二 li 一 元 素 中 的 二 a> 元 素 中 ,从 而 添加 
到 列表 项 目 中 。 罗 天 系列 ， 荔 酒 之 源 ， 洋 河 新 员 @y 


投 责 爹 胡 : 21w 32 万 | 1002 人 已 咨询 


相国 白酒 虹 马 ,经 松 代理 册 针 不 各 © 
投资 金富 : 10~20 万 | 2007 人 已 音 询 


<u data- role= "listview"> 
<li><ahref 伍 哇 "><img src=" chrome.png"> 页 面 </a></I 
<li><a href="#">< img src=" firefox.png"> 页 面 </a></ 
li> 
</al> 
对 于 大 于 16pxX16px 的 图 片 ,请 在 链接 中 添加 过 img 之 元 素 。 如 果 图 片 的 宽度 或 高 度 
大 于 80px, 则 jQuery Mobile 将 自动 把 图 片 调整 至 80pxX80px; 如 果 宽 度 或 高 度 小 于 80px， 
那么 不 会 调整 图 片 的 大 小 。 如 图 8-38 所 示 。 
2 列表 图 标 
图 标 与 缩 略图 是 类 似 的 ,只 是 图 标 更 小 一 点 。 缩 略图 是 80pxX 80px 的 图 片 ,而 图 标 是 
16pxX16px 的 图 片 。 在 列表 中 使 用 图 标 . 与 使 用 缩 上 略图 的 方法 相同 。 只 是 在 二 img 记 元 素 
添加 class 二 "ui-li-icon" 属 性 。 


图 8-37 “知名 酒水 项 目 " 页 面 
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<ul data- role= "listview"> 

<1li><a href= 叶 "><img src=" us.png" class= "ui- 1i- icon> 美 国 < /a>< /li> 

<1li><ahre 会 啡 必 <jimg src=" gp.png" class= "ui- 1i- ioon"> 英 国 </a>< /li> 
</al> 


页 面 浏览 效果 如 图 8-39 所 示 。 


缩 略 图 列表 图 标 列表 


图 8-38 列表 缩 略 图 图 8-39 列表 图 标 


【任务 实施 】 


案例 ”制作 “知名 酒水 项 目 ”" 页 面 。 
任务 1 添加 页 面容 器 ,并 设置 页 面 标题 。 


< div data- roler= "page" id- "page"> 
<div data- role= "header'"> 
<h2> 知 名 酒水 项 目 < /> 
</div> 
<div data- role= "oontent"> 
</div> 
</div> 


任务 2 添加 一 个 含有 5 个 列表 项 的 标准 列表 ,添加 缩 略 图 ,编辑 列表 项 。 


<u data- role= "listview"> 
<1i> 
<a href= "4 "> < img src= "img/sl.jpg" width= "150" height= "100"> 
<h3> 史 玉 柱 牵手 五 粮 液 ,功能 白酒 享 财 < /h3> 
< 了 全 投 资金 额 : 20~ 30 万 元 | 2007 人 已 咨询 < /p></a></1i> 
<1i> 


‘ ETS 有 人 ff HM Cs+Qey 
196 ， 
ee <a href=# "> < img src= "img/s2.jpg" width= "150" height= "100"> 

<h3> 泸 州 老 窒 直 营 品牌 , 抢 到 即 赚 < /h3> 

< 了 投资 金额 : 10~ 20 万 元 | 1835 人 已 咨询 < /p>< /a></1i> 
<1i> 

<a href=# "> < img src= "img/s3.jpg" width= "150" height= "100"™> 

<h3> 西 风 集团 议 峰 力作 新 贵妃 醉酒 < /h3> 

< 户 投 资金 额 : 20~ 30 万 元 | 2037 人 已 咨询 < /p></a></1i> 
<1i> 

<a href=# "> < img src= "img/s4.jpg" width= "150" height= "100"> 

<h3> 白 酒 黑马 ,轻松 代理 赚钱 不 愁 < /h3> 

< 本 投资 金额 : 10~ 20 万 元 | 2007 人 已 咨询 < /p></a></1li> 
过 了 > 

<a hre 人 啡 吃 < img src= "img/s5.jpg" width= "150" height= "100"> 

<h3> 苏 源 系列 , 苏 酒 之 源 , 洋 河 新 贵 < /h3> 

< 了 投资 金额 : 21~ 32 万 元 | 1002 人 已 咨询 </p></a></li> 

</a> 


任务 3 浏览 测试 ,页 面 效 果 如 图 8-37 所 示 。 


8.6 表单 设计 


制作 “添加 学 生 信息 ”表单 页 面 ,如 图 8-40 所 示 。 
【知识 基础 】 


1 表单 结构 
jQuery Mobile 提供 了 一 套 完整 的 ,适合 触摸 操作 的 
表单 元 素 ,这 些 元 素 都 是 基于 原生 的 HTML 标签 元 素 , 所 | ga 
有 的 表单 都 应 该 被 包含 在 一 个 二 form 二 标签 内 。jQuery | as 
Mobile 使 用 CSS 来 设置 HTML 表单 元 素 的 样式 ,以 使 其 
更 有 吸引 力 更 易 用 。 | 
当 您 与 jQuery Mobile 表单 打交道 时 ,应 该 了 解 以 下 | 一 一 
几 点 信息 。 
(1) 二 form 志 元素 必 须 设置 method 和 action 属性 。 一 年 级 © 
(2) 每 个 表单 元 素 必须 设置 唯一 的 "id" 属 性 。 该 id 在 
站 点 的 页 面 中 必须 是 唯一 的 。 这 是 因为 jQuery Mobile 的 ee 
单 页 面 导航 模型 允许 许多 不 同 的 “页 面 " 同 时 呈现 。 rp re pp 
(3) 每 个 表单 元 素 必须 有 一 个 标记 (label)。 请 设置 图 8-40 “添加 学 生 信 息 ” 表 单 页 面 
label 的 for 属性 来 匹配 元 素 的 id。 


添加 学 生 信息 


< fom method= "post" action= " demform.php"> -.< /fomm 


2 域 容器 
如 果 需 要 label 和 表单 元 素 在 宽屏 幕 上 正常 显示 ,用 带 有 data-role= "fieldcontain" 属 性 
的 二 div> 或 二 fieldset 盖 元 素来 包装 label 或 表单 元 素 。 
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< forn method= "post" action= "demoform.php"> 
<div data- role= "fieldcontain"> 
< label for= "fname"> First name:< /label> 
< imput type= "text" name= "fname" id- "fname"> 
</div> 
< /fomr> 
注意 : fieldcontain 属性 基于 页 面 宽度 来 设置 label 和 表单 控件 的 样式 。 当 页 面 宽度 大 
于 480px 时 , 它 会 自动 将 label 与 表单 控件 放置 于 同一 行 。 当 小 于 480px 时 ,label 会 被 放置 
于 表单 元 素 之 上 。 
3 文本 框 
文本 框 是 jQuery Mobile 最 常用 的 表单 类 型 组 件 之 一 。 常 用 的 文本 框 有 文本 输入 框 、 
密码 输入 框 和 文本 区 域 框 。 最 基本 的 文本 框 和 普通 网 页 的 文本 框 的 用 法 相同 。 


<div data- role= "fieldoontain"> 
<label for= "txtipt"> 文 本 输入 :< /label> 
< input type= "text" name= "txtipt" id= "txtipt" /> 
< /div> 
< div data- role= "fieldoontain"> 
< label for= "pwdipt"> 密 码 输入 :< /label> 
< input type= "password" name= "pwdipt" id- "pwdipt" /> 
< /div> 
< div data- role= "fieldoontain"> 
< label for= "textarea"> 文 本 区 域 :< /label> 
< textarea 0015= "40" rows= "8" name= "textarea" id- "textarea"> < /textarea> 
</div> 
输入 字段 是 通过 标准 的 HTML 元 素 编写 的 ,jQuery 
Mobile 会 为 它们 设置 专门 针对 移动 设备 的 美观 易 用 的 样 
式 , 如 图 8-41 所 示 。 二 
jQuery Mobile 除了 支持 最 基本 的 文本 类 型 外 ,还 支 
持 HTML 5 标准 规范 的 扩展 文本 类 型 ,如 email、 url、 
number tel 等 文本 框 。 人 


< div data- roler "fieldoontain"> 
< label for= "nmipt"> nmber:< /label> 文本 区 二 
< input typer "nunber" name= "numipt" id- me 
"numipt" /> 

</div> 

< div data- roler "fieldoontain"> 


< label for= "telipt"> tel:< /label> 
< irput type= "tel" nere= "telipt" id "telipt" /> 
</div> 
< div data- role= "fieldoontain"> 
< label for= "emailipt"> email:< /label> 图 8-41 常用 文本 框 类 型 


1 人 二 HTML CSSjOey 
198 ， 
vd < input type= "email" name= "emailipt" id= "emailipt" /> 
< /div> 
<div data- role= "fieldomntain"> 

< label for= "urlipt"> url:< /label> 
< input type= "url" name= "urlipt" id= "urlipt" /> 
</div> 


这 些 扩展 文本 框 在 桌面 浏览 器 上 的 显示 效果 和 普通 的 文本 框 显示 效果 基本 一 致 ,如 
图 8-42 所 示 。 唯 一 的 区 别 是 在 移动 设备 上 的 输入 键盘 会 根据 不 同 的 类 型 而 不 同 , 当 输入 
number 和 tel 类 型 文本 时 ,键盘 自动 切换 到 数字 键盘 ,如 图 8-43 所 示 。 


number number 


tel 


email 


图 8-42 扩展 文本 框 类 型 图 8-43 输入 tel 类 型 文本 


4 单 选 按钮 

当 用 户 只 选择 有 限 数 量 选项 中 的 一 个 时 ,会 用 到 单 选 按钮 。 如 需 创建 一 套 单 选 按钮 , 需 
要 添加 type="radio" 的 一 input 过 元素 以 及 相应 的 二 label 二 元 素 。 在 一 fieldset 二 元 素 中 包 
装 单 选 按钮 ,也 可 以 增加 一 个 二 legend 志 元 素来 定义 fieldset 二 的 标题 。 

注意 : 请 用 data-role 二 "controlgroup" 属性 来 组 合 这 些 按 钮 。 


< div data- role= "fieldoontain"> 

< fieldset data- role= "controlgroup> 
< legend> 垂 直 布 局 < /legend> 
< input type= "redio" name= "rediol" id- "radiol 0" value= "1" /> 
< label for= "radiol 0"> 选 项 1< /label> 
< input type= "radio" name= "radiol" id- "radiol 1" value= "2" /> 
< label for= "radiol lw> 选 项 2< /label> 

< /fieldset> 
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</div> 
< div data- role= "fieldoontain"> 
< fieldset data- role= "controlgroup" data- type= "horizontal"> 
<legend> 水 平 布局 < /legend> 
< input type= "radio" name= "radio2" id "radio2 0" value= mn /> 
< label for= "radio2 0"> 选 项 1< /label> 
< input type= "radio" name= "radio2" id- "radio2 1" value= "2" /> 
<label for= "radic2 1"> 选 项 2< /label> 
< /fieldset> 
< /div> 
通过 浏览 单 选 按钮 效果 如 图 8-44 所 示 。 从 图 中 可 以 | sn 
看 出 ,这 种 单 选 按钮 组 的 按钮 选项 的 布局 可 以 是 垂直 排列 选项 1 
的 ,也 可 以 是 水 平 排列 的 ,只 需 在 二 fieldset 二 元 素 中 添加 | 9 m2 
data-type 一 "horizontal" 属 性 。 
水 平 排列 单 选 按钮 组 与 垂直 排列 单 选 按钮 组 在 界面 | jp 
上 有 些 区 别 。 水 平 排列 单 选 按钮 组 缺少 左 侧 的 图 标 , 其 风 和 运 项 1 国电 
格 更 像 是 一 种 开关 选择 控件 。 
5 复原 框 
复 选 框 与 单 选 按 钮 类 似 。 只 是 在 选择 有 限 数量 选项 
中 的 一 个 或 多 个 选项 时 ,会 用 到 复 选 框 。 


<div data- role= "fieldcontain'"> 


< fieldset data- roler "oontrolgroup"> 
< 1legend> 垂直 布局 < /legend> 图 8-44 单 选 按钮 组 
id "checkboaxl 0" value= "1" /> 
< abel for= "checkboxl 0"> 选 项 1< /label> 
< input type= "chedibow" namer "checkboxl' id "checkbaxl 1" value= "2" /> 
< label for= "checkboxl lw> 选 项 2< /label> 
< input type= "chedibow" namer "checkHboaxl" id "checkboaxl 2" value= "3" /> 
< label for= "checkboxl 2"> 选 项 x /label> 
< /fieldset> 


</div> 
< div data- roler "fieldoontain"> 
< fieldset data- role= "controlgroup" data- type= "horizontal"> 

<legenc> 水 平 布局 < /legend> 
< input type= "checkboe" name= "chedtbas2n id- "chedtba2 0" value= "1" /> 
< label for= "checkbox2_0"> 选 项 1< /label> 
< input type= "dhedibow" nare= "hecho" id "chectba2 1" value= "2" /> 
< label for= "checkbox2 1"> 选 项 2< /label> 
< input type= "checbo" nere= "chedibas2n id- "chediba2 2" value= "3" /> 
< label for= "checkbox2 2"> 选 项 Xx /label> 
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“ws < /fieldset> 
</div> 
浏览 复 选 框 ,效果 如 图 8-45 所 示 。 


6 下 拉 选 择 菜单 

在 移动 设备 上 ,表单 的 下 拉 选 择 菜单 组 件 非常 特殊 , 它 不 像 传统 桌面 应 用 那样 可 以 直接 
使 用 鼠标 去 选择 下 拉 列 表 中 相应 的 数据 。 它 是 在 触 屏 设备 上 采用 弹出 层 的 方式 来 选择 数 
据 , 如 图 8-46 所 示 。 


图 8-45 复 选 框 组 图 8-46 ”下拉 选择 菜单 


要 添加 这 样 的 下 拉 选 择 菜单 组 件 , 可 以 使 用 二 select 二 元 素 创建 带 有 若干 选项 的 下 拉 菜 
一 select 二 元 素 中 的 二 option 二 元 素 定 义 列表 中 的 可 用 选项 。 


单 ， 


<div data- role= "fieldoontain"> 
< label for= "sltmenu" class= "select"> 选 项 :< /label> 
< select name= "sltmenu" id= "sltmenu"> 
< option value= "option1"> 选 项 1< /option> 
< option value= "option2"> 选项 2< /option> 
< option value= "option3"> 选 项 3< /option> 
< /select> 
</div> 


7 搜索 输入 杠 

搜索 输入 框 是 一 个 扩展 的 二 input 二 标签 元 素 ,外观 为 圆 角 , 当 用 户 输入 文字 后 ,右边 会 
出 现 一 个 又 的 图 标 , 若 单 击 , 则 会 清除 输入 的 内 容 , 如 图 8-47 所 示 。 

要 在 表单 中 添加 搜索 输入 框 , 需 在 二 input 二 标签 中 添加 type 二 "search" 属 性 来 定义 搜 
索 框 。 


<div data- role= "fieldoontain> 
< label for= "srhipt> 搜 索 :< /label> 
< input type= "search" name= "srhipt" id= "srhipt" /> 
</div> 


8 滑 块 
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滑 块 允许 从 一 定 范围 内 的 数字 中 选取 值 ,也 可 以 手动 输入 值 ,如 图 8-48 所 示 。 


搜索 
website 日 


slider 6 


图 8-47 搜索 输入 框 


要 在 表单 中 添加 搜索 输入 框 , 需 在 二 input 二 标签 中 添 
加 type 二 "range" 属 性 来 定义 滑 块 。 


<div data- role= "fieldoontain"> 
< label for= "slider"> slider:< /label> 
< input name= "slider" type= "range" id 
"sligert" value= "6" min= "0" maxe= "10" /> 
</div> 
其 中 ,max 和 min 属性 规定 滑 块 允许 的 最 大 值 和 最 小 
值 ,value 属性 规定 滑 块 的 默认 值 。 


9 切换 开关 

切换 开关 在 移动 设备 上 是 一 个 常用 的 表单 元 素 , 用 于 
开 / 关 或 对 / 错 按钮 ,如 果 8-49 所 示 。 

如 需 创 建 切 换 开 关 , 需 要 在 二 select 二 标签 中 添加 
data-role 二 "slider" 属 性 ,并 添加 两 个 二 option 二 元 素 。 


<div data- role= "fieldoontain"> 


图 8-48 滑 块 


图 8-49 切换 开关 


201 


{ Tm si 


202 ， 


< label for= "flipswitdh"> 选 项 :< /label> 


< select name= "flipswitch" id= "flipswitch" data- role= "slider"> 


<option value= "off"> 关 < /opticn> 
< option value= "on"> 开 < /aption> 


< /select> 


< /div> 


【任务 实施 】 


案例 制作 * 添 加 学 生 信息 ?表单 页 面 。 
任务 1 添加 页 面容 器 ,并 设置 页 面 标题 。 


<div data- role= "page" id- "page"> 
< div data- role= "header"> 
<h2> 添 加 学 生 信息 < /h2> 


</div> 


<div data- role= "content"> 


</div> 
</div> 


任务 2 插入 表单 。 


根据 图 8-5 所 示 插 入 表单 及 其 元 素 ,表单 及 其 元 素 的 基本 属性 如 表 8-5 所 示 。 
表 8-5 ”添加 学 生 信息 表单 及 其 元 素 说 明 


标 签 名 称 类 型 初 始 值 含义 
姓名 name input/text 一 文本 输入 框 
性 别 sex select 邮箱 /账号 / 微 博 切换 开关 
年 龄 pwd input/range 请 输入 密码 滑 块 
年 级 grade | select/ 一 年 级 /二 年 级 /三 年 级 /四 年 级 下 拉 选 择 菜单 
参加 时 间 time input/radio 1/2/3 单 选 按钮 
添加 input/submit 添加 提交 按钮 


< fom action= "save.php" method= "get"> 


<div data- role= "fieldoontain"> 


<label for= "name"> 姓 名 :< /label> 


< input typer "text" name= "name" id "name" /> 


</div> 


<div data- role= "fieldoontain"> 


< label for= "sex" > 性别 :< /label> 


< select name= "sex" id "sex" data- role= "slider"™> 


<option value= "off"> 男 < /option> 
<cption value= "on"> 女 < /option> 
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< /select> We 
</div> 
< div data- roler "fieldoontain"> 
< label for= "age'"> 年 龄 :< /label> 
< input type= "range" name= "age" id "age" value= "1" min= "15" mve= "30" /> 
</div> 
< div data- roler "fieldoontain"> 
< label for= "grade" class= "select"> 年 级 :< /label> 
< select name= "grade" id- "grade"> 
<cpticn value= ma 一 年 级 < /option> 
<cpticn value= "2"> 二 年 级 < /apticn> 
< cption value= "3"> 三 年 级 < /option> 
< cption value= "4"> 四 年 级 < /option> 
< /select> 
</div> 
< div data- role= "fieldoontain"> 
< fieldset data- role= "controlgroup" data- type= "horizontal"> 
< legend> 参 加 活动 时 间 :< /legend> 
< input type= "radio" name= "time" id- "time 0" class= "custam" 
value= "1" /> 
<label for= "time 0"> 上 午 < /label> 
< input type= "radio" name= "time" id "time 1" class= "custam" 
value= "2" /> 
< label for= "time 1"> 中 午 < /label> 
< input type= "radio" namer "time" id "time 2" class= "custam" 
value="3" /> 
<label for= "time 2"> 晚 上 < /label> 
< /fieldset> 
</div> 
< input type= "submit" value= " 溪 加 " data- icon= "plus" /> 


< /fom> 


任务 3 浏览 测试 ,页 面 效 果 如 图 8-40 所 示 。 


8.7 任务 拓展 


任务 ”制作 “周边 游 线路 ”页面 。 

任务 描述 :“ 周 边 游 线路 ?页面 主要 有 页 眉 、 内 容 和 页 脚 三 个 区 域 构 成 。 页 眉 区 由 标题 
和 两 个 图 标 按钮 构成 ,内 容 区 域 由 图 文 列 表 组 成 ,页 脚 采用 固定 定位 导航 栏 与 图 标 按钮 的 方 
式 ,如 图 8-50 所 示 。 

任务 要 求 : 利用 jQuery Mobile 框架 完成 页 面 制作 。 


A 与 制 作 一 HM CS+jQey 
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上 靖 【 乐 活 焊 款 ) | 莫 干 山 
礼 清 开元 骂 居 酒 店 2 天 1 晚 自 由 行 | 


Y149; 


至 【 财 商 系列 | 我 是 爱 
| 隆 心 公益 活动 


p> 温泉 学 ,周末 不 加 价 | 
茹 兴 总 汀 海 洒 大 酒店 2 天 ] 隐 自由 


Y239; 
Re kT 六 区 二 
v147 
辆 : 路 


BE 


图 8-50 网 站 建议 表单 


8.8 本 章 小 结 


通过 多 个 案例 的 制作 ,介绍 了 jQuery Mobile 及 其 应 用 环境 ;详细 介绍 了 页 面 结构 、 工 
具 栏 .按钮 ,表单 列表 ,网 格 等 相关 知识 和 技术 。 通 过 本 章 学 习 , 读 者 应 具备 可 竹内 容 页 面 
制作 、 网 站 导航 栏 制作 的 能 力 ;具备 能 使 用 布局 网 列表 视图 进行 页 面 布局 的 能 力 ; 具 备 表单 


页 面 设 计 的 能 力 ; 具 备 移动 设备 网 页 综合 设计 的 能 力 。 
习 ” 题 
(1) jQuery Mobile 框架 由 什么 文件 构成 ? 


(2) 什么 是 基于 链接 的 按钮 ,如 何 创建 一 个 这 种 按钮 ? 
(3) 使 用 jQuery Mobile 设计 一 个 联系 方式 表单 。 


(4) 创建 或 寻找 一 套 自 定义 图 标 ,并 在 按钮 上 应 用 。 改 变 图 标 在 按钮 上 的 位 置 并 留意 


其 在 按钮 上 的 变化 。 


(5) 创建 一 个 地 址 敌 ,使 用 列表 分 隔 元 素 , 并 使 用 搜索 过 滤器 ,以 快速 查找 到 想 要 找到 


的 名 字 。 
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网 页 的 布局 ,在 过 去 主要 是 采用 Table( 表 格 ) 布 局 的 模式 。 为 了 满足 网 页 技术 的 迅猛 
发 展 \ 规 范 网 页 技术 、Web 标准 技术 得 以 完善 ,DIV 网 页 布局 技术 作为 一 种 合乎 Web 标准 
要 求 的 新 技术 ,得 到 了 广泛 的 推广 ,成 为 国际 技术 标准 。 因 此 ,在 本 章 中 将 主要 学 习 利 用 
DIV 十 CSS 技术 来 完成 网 页 的 布局 。 学 习 DIV 十 CSS 布局 技术 首先 要 理解 关于 Web 标准 
对 技术 的 要 求 , 然 后 要 能 够 熟练 使 用 常见 布局 类 型 ,如 一 列 固定 宽度 、 一 列 宽 度 自 适应 、 两 列 
固定 宽度 两 列 宽度 自 适应 \ 两 列 右 列 宽度 自 适 应 、 三 列 浮动 中 间 宽 度 自 适应 .三 行 两 列 居 中 
高 度 自 适应 布局 。 本 章 是 DIV 十 CSS 布局 技术 的 开始 , 主要 学 习 一 列 及 两 列 固定 宽度 与 自 
适应 宽度 布局 技术 。 


9.1 客户 需求 


企业 宣传 网 站 (企业 形象 网 站 ) 的 作用 主要 是 以 展示 企业 形象 为 主 ,网 站 通过 对 企业 
信息 的 系统 介绍 ,让 浏览 者 熟悉 企业 的 情况 、 了 解 企业 所 提供 的 产品 和 服务 ,并 通过 有 效 
的 在 线 沟通 、 交 流 方式 搭建 起 潜在 客户 与 企业 之 间 的 桥梁 。 其 网 站 建设 主要 作用 体现 
如 下 。 

通过 网 络 展示 、 宣 传 自 己 的 企业 及 产品 ,进行 营销 活动 ;具备 一 定 知名 度 的 品牌 和 集团 ， 
拥有 固定 的 用 户 群 ,需要 建立 统一 形象 的 官方 网 站 ,通过 互动 媒体 传播 的 方式 ,巩固 及 扩大 
企业 形象 ,构成 统一 的 企业 宣传 系统 和 信息 门户 。 

“和 舒适 家 居 ?是 一 家 专门 提供 装修 设计 的 小 型 企业 ,其 业务 范围 主要 是 为 客户 提供 居家 
装修 的 设计 图 与 装修 材料 。 网 站 的 主要 作用 是 展示 企业 的 形象 与 设计 的 作品 ,增强 在 同类 
企业 中 的 竞争 力 ,为 客户 提供 较 完备 的 信息 服务 。 


9.2 网 站 分 析 


921 网 页 主题 分 析 

根据 上 述 客 户 需求 ,网 页 设计 师 的 工作 首先 是 将 文字 技术 档案 转化 为 网 页 元 素 所 能 表 
现 的 形式 ,一 般 来 讲 主要 是 明确 客户 建站 目的 、 网 站 定位 、 栏 目 设计 、 语 言 设计 、 网 站 功能 等 
要 求 ,来 体现 本 网 站 的 主题 内 容 。 


Csjaey 


建站 目的 : 本 公司 位 于 某 市 经 济 开发 区 , 现 有 专业 的 家 装 设计 师 十 余人 ,业务 范围 遍布 
全 省 。 建 立 “ 舒 适 家 居 ?网 站 ,以 进一步 提高 公司 档次 和 知名 度 ,为 客户 提供 优质 方便 与 快 
捷 的 服务 。 
网 站 定位 要 求 : 展示 企业 形象 。 
网 站 栏目 设置 要 求 : 网 站 栏目 内 容 设置 包括 室内 设计 动态 信息 、 设 计 相 关 政 策 会员 之 
家 、 在 线 问答 ,涉及 装修 材料 等 高 新 技术 的 发 展 和 装修 项 目 指导 等 相关 的 信息 应 用 。 
网 站 语言 设计 要 求 : 要 求 有 中 .英文 两 个 版 本 。 
网 站 创意 设计 要 求 有 以 下 几 点 。 
。 网 站 形象 首页 创意 设计 。 
。 内 容 首页 创意 设计 。 
Flash 动画 效果 。 
网 站 动态 旗帜 广告 (Banner) 。 
。 内 容 页 面 制作 ,动态 页 眉 美工 合成 。 
。 图 片 处 理 。 
网 站 售后 服务 要 求 有 以 下 几 点 。 
。 网 站 推广 (代理 收费 加 注 搜 狐 .新浪 等 收费 门户 网 站 ;免费 加 注 国 内 其 他 排名 前 
20 家 非 收费 搜索 引擎 ) 。 
。 网 站 维护 (一 年 的 网 站 内 容 免费 更 新 ,不 改变 网 站 导航 结构 ) 。 
。 数据 库 系 统 维护 (一 年 内 免费 , 含 数据 库 系 统 数据 批量 上 传 , 数 据 备份 等 ) 。 
。 培训 两 名 维护 人 员 。 


922 网 页 风格 定位 


网 站 的 风格 是 一 个 比较 抽象 的 概念 ,没有 固定 的 模式 与 标准 ,我 们 可 以 简单 理解 为 网 站 
的 自身 特点 如 色彩 构成 ,版 式 设计 等 ,一 般 主要 利用 以 下 四 个 方面 进行 表现 。 

1 颜色 风格 

营造 出 各 种 类 型 网 站 的 整体 气氛 ,包括 标志 、 色 彩 、 字 体 、 标 语 等 色彩 ,勾勒 出 网 站 的 整 
体 视觉 效果 。 

2 版 式 设计 

所 谓 版 式 设计 ,就 是 对 网 页 各 元 素 进行 排序 ,划分 出 重点 ,次 重点 ,一般 表现 区 域 。 并 明 
确 各 区 域 网 页 元 素 所 呈现 的 方式 ,如 动画 方式 、 文 字 方 式 、 图 片 方式 等 。 当 前 由 于 版 式 设计 
划分 原则 不 同 , 因 此 叫 法 也 不 相同 ,但 是 从 本 质 上 来 说 版 式 设计 的 作用 在 于 ,实现 内 容 的 主 
次 划分 。 

3 内 容 结构 风格 

内 容 是 网 页 各 元 素 的 组 合体 ,所 谓 内 容 结 构 风 格 , 是 指 对 网 页 各 元 素 结构 的 设计 ,是 网 
站 的 信息 支撑 ,风格 个 性 化 的 主导 因素 。 

4 语言 风格 

要 注意 不 同 的 语言 字符 对 网 站 的 影响 亦 不 尽 相 同 。 如 英文 字符 较为 精简 ,适宜 做 小 巧 
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精致 类 型 的 网 站 ;中 文字 符 雅 致 繁复 , 较 适 宜 做 端庄 严肃 类 型 的 网 站 。 由 于 网 站 服务 的 公司 
规模 有 限 ,语言 采用 中 文 版 。 

本 企业 宣传 网 站 的 风格 定位 按 上 述 四 方面 可 说 明 如 下 几 点 。 

主 色 调 采用 了 深 棕 绿 色 ,以 白色 为 辅助 色 , 点 组 少许 橘 色 等 温 色调 。 页 面 中 的 文字 、 链 
接 、 栏 目 等 都 以 棕色 进行 设计 ,呼应 了 本 网 站 “家 的 温情 ”。 

版 式 设计 采用 以 图 示 为 诉 诸 方 式 的 满 版 设计 模式 ,强调 了 页 面 的 整体 艺术 气息 。 

以 图 片 为 主 ,文字 为 辅助 的 内 容 结构 ,充分 利用 图 片 比 文字 更 具有 感召 力 的 特点 ,让 浏 
览 者 亲身 体会 到 企业 的 实力 与 水 平 。 

不 同 的 主题 对 框架 、 色 彩 等 元 素 的 要 求 都 不 尽 相 同 。 作 为 宣传 网 站 ,要 点 是 吸引 用 
户 的 视野 ,本 项 目 是 家 居 网 站 ,在 风格 定位 上 要 产生 温暖 、 和 舒适 的 感觉 ,充分 体现 家 的 祥 
和 氛围 。 


9.3 网 站 搭建 


931 建立 网 站 结构 


(1) 打开 Dreamweaver CS5 软件 ,在 菜单 栏 中 选择 * 站 点 ”中 的 “新 建站 点 ”, 设 置 “ 站 点 
名 称 ”为 one, 本 地 根 文件 夹 为 e:\one, 然 后 单 击 “ 确 定 ” 按 钮 ,具体 效果 如 图 9-1 所 示 。 


one 的 站 点 定义 为 


本 地 信息 
站 点 名 称 四: [one 
本 地 根 文件 夹 到): |e: \one [= 


Contribute 
模板 


默认 图 你 文件 夹 I) = 
链接 相对 于 : 回 文档 @ 回 站 点 根 目录 (S) 
JITF 地 址 0): |http:7/ 


CD 


Spry 


区 分 大 小 写 的 链接 : 回 使 用 区 分 大 小 写 的 链接 检查 人 
缓存 : 回 局 用 组 存 @) 


9-1 站 点 定义 对 话 框 


(2) 在 “文件 ”面板 中 ,对 one 站 点 通过 右键 添加 文件 夹 images 存放 图 像 ,添加 style 存 
放 CSS 样式 表 。 


/209 


tN 于 设 计 与 制作 一 HM+ CSS+jQey 


210 ， 


932 建立 网 站 主页 
在 “文件 ”面板 中 ,对 one 站 点 通过 添加 文件 Feiecera 


index. html 作为 网 站 的 主页 。 如 果 用 其 他 方式 ,需要 |Bm | 
建立 index. html 页 并 保存 到 当前 站 点 下 。 在 style 文 a 站 生生、 a 1 生疏 
件 夹 中 添加 index. css 文件 作为 index. html 的 CSS | 中 关上 -ene 于 | 


样式 表 ,( 当 前 采用 的 是 HTML 文件 和 CSS 一 一 对 应 一 和 
的 方案 ,也 可 以 采用 其 他 方案 如 根据 HTML 文件 按 
类 别 CSS 文件 划分 等 ) 则 本 站 点 结构 如 图 9-2 所 示 。 


9.4 技术 准备 


网 站 主页 即 首页 ,担负 着 网 站 “形象 大 使 ”的 任务 。 从 首页 就 可 以 窒 探 出 网 站 的 定位 和 
服务 对 象 ,由 于 网 站 功能 定位 的 不 同 , 不 同类 型 网 站 首页 的 表现 形式 各 有 千秋 。 如 首页 功 
能 、 表 达 形 式 \ 传 递 信息 内 容 \ 设 计 风 格 、 页 面 布局 等 。 

企业 网 站 作为 企业 进行 网 络 营销 和 形象 展示 的 网 络 平台 , 它 的 作用 不 仅 在 于 产品 的 展 
示 和 推广 ,更 重要 的 是 要 建立 客户 对 企业 和 产品 的 信心 ,所 以 企业 网 站 首页 要 充分 体现 专业 
性 和 可 信和 度 , 吸 引 浏览 者 的 目光 ,让 浏览 者 对 企业 产生 好 奇 心 和 信心 。 一 句 话 : 企业 网 站 首 
页 必须 让 用 户 产生 信任 感 。 


941 网 页 DV 区 域 划 分 


1 indexhmi 效果 图 分 析 
通过 图 9-3 所 示 页 面 效果 图 的 设计 ,要 从 以 下 三 个 大 方面 入 手 进 行 分 析 。 


图 9-2 站 点 结构 图 


rp 国 EzeiemT 字 W38 -站 国 E。 所 


图 9-3 页 面 效 果 图 


第 9 章 ， 企 业 吉 传 殉 让 -等 运 家 居 网 胸 |， 


(1) 色彩 设计 : 本 页 面 为 “舒适 家 居 ” 网 站 的 主页 
效果 图 设计 
面 ,在 页 面 设计 上 本 页 面 采用 了 深 绿 色 为 背景 ,突出 区 二 于 


高 雅 的 氛围 ,由 于 在 页 面 中 有 动画 效果 ,色彩 较 多 , 因 Logo 
此 在 页 面 中 添加 了 白色 作为 点 比 色 。 
(2) 图 片 设 计 : 本 页 面 以 图 片 展示 为 主 ,通过 Las 呈 
图 片 来 展示 公司 的 主要 作品 ,展示 产品 的 特点 和 宣传 区 域 
效果 。 
(3) 布局 设计 : 本 页 面 采用 了 典型 的 通栏 布局 模 [wma] 
式 ,页 面 布局 为 左右 结构 ,分 别 为 宣传 产品 .产品 动画 | 
展示 、 网 页 链接 、Logo 站 标 等 部 分 ,其 具体 组 成 如 
图 9-4 所 示 。 L_ as 轩 ] 


2 利用 DIV 划分 区 域 es 
技术 点 拨 : 
了 解 Web 标准 的 内 容 


Web 标准 是 由 W3CCWorld Wide Web Consortium 万 维 网 联盟 ) 和 其 他 标准 化 组 织 
制定 的 一 套 规范 集合 ,是 一 系列 标准 的 组 合 。Web 标准 的 目标 : 表现 与 结构 进行 分 离 。 
Web 标准 的 构成 : 结构 表现、 行为 三 大 部 分 。 

结构 : 对 网 页 中 用 到 的 信息 进行 整理 与 分 类 。 用 HTML、XML、XHTML 进行 结构 
化 设计 。 

表现 : 对 已 被 结构 化 的 信息 进行 显示 上 的 控制 。 它 包 仿 版式、 颜色 、 大 小 等 形式 控 
制 。 由 CSS 来 完成 。 

行为 : 对 整个 文档 内 容 的 一 个 模型 定义 及 交互 行为 的 编写 ,用 于 编写 用 户 可 进行 交互 
式 操 作 的 文档 。 主 要 的 Web 标准 有 DOM( 文 档 对 象 模型 ) 和 JavaScript( 标 准 脚本 语言 )。 


从 Index. html 效果 图 可 以 看 出 ,网 页 元 素 较 少 ,结构 较 松 散 , 宜 采 用 宽度 自 适应 布局 以 
扩大 页 面 在 浏览 器 中 所 占 面 积 。 在 利用 DIV 十 CSS 进行 网 页 布局 时 ,主要 有 固定 宽度 和 自 
适应 宽度 两 种 方式 。 所 谓 宽度 自 适应 布局 方式 是 指 能 根据 浏览 器 窗口 的 大 小 自动 改变 其 宽 
度 或 高 度 值 的 一 种 布局 模式 , 它 能 根据 不 同 分 辩 率 的 显示 器 提供 很 好 的 显示 效果 。 固 定 宽 
度 则 是 指 网 页 宽度 为 固定 的 值 ,不 受 显 示 器 的 影响 。 
利用 CSS 十 DIV 进行 页 面 布 局 首先 是 划分 区 域 , 根 据 区 域 块 面积 及 所 存放 网 页 元 素 不 
同 将 页 面 用 DIV 分 块 。 本 图 中 分 为 container、logo、intro、llinks、aflash 五 个 DIV 块 ,其 中 
container 为 最 外 层 的 块 ,包含 了 其 他 四 个 DIV 块 。 具 体 效果 如 图 9-5 所 示 。 
。 页面 body 的 深 绿色 背景 ,提出 颜色 值 为 #666633 即 可 。 
。 为 了 实现 内 容 的 整体 居中 和 底 纹 ,需要 一 个 最 外 层 (id=container) 来 放置 所 有 内 容 。 
内 容 区 域 container 背景 由 底 纹 、 条 件 等 组 成 。 有 一 定 规律 性 ,可 做 成 1 像素 或 少 像 
素 的 线 ,在 XHTML 中 利用 横向 平 铺 完成 整个 背景 的 绘制 。 

。 内 容 区 域 中 左 侧 部 分 放置 宣传 图 片 的 层 (id=pic) ,背景 带 底 纹 效果 ,前景 为 图 片 , 因 
此 整个 进行 切片 。 由 于 图 片 颜色 丰富 ,保存 为 .jpg 格式 。 
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口 健 汤 十 品质 专业 域 疡 晶 隐 
了 


id= llinks 


图 9-5 页 面 划分 DIV 区 域 块 


。 内 容 区 域 中 间 部 分 放置 动画 层 (id= aflash) ,为 动画 部 分 。 需 要 计算 起 始 坐标 位 置 ， 
计算 出 动画 的 尺寸 。 

。 内 容 区 域 中 右 侧 部 分 放置 Logo(id 二 logo) 、 网 站 宣传 语 (id 二 intro) 、 网 站 导航 (id 二 llinks)， 
即 站 标 、 宣 传 文字 、 链 接 。 站 标 要 进行 整体 切片 保存 为 .jpg 格式 ,宣传 文字 与 链接 要 
在 XHTML 中 完成 即 可 ,对 于 链接 前 面 的 小 图 标 壬 .要 进行 切片 ,保存 为 . gif 格式 。 
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1 用 Fhotoshop 软件 完成 效果 图 切片 点 
从 效果 图 中 利用 切片 的 方式 提取 网 页 制作 中 所 需 的 文字 或 图 片 素材 。 提 取 的 原则 是 ， 
如 何 利用 层 (div) 来 组 合 该 页 的 规划 。 效 果 如 图 9-6 所 示 。 


id= llinks 


图 9-6 切片 划分 图 


页 面 body 的 深 绿色 背景 .只 需 颜 色 值 共 666633 即 可 。 

container 区 域 : 背景 由 底 纹 、 条 件 等 组 成 ,有 一 定 规律 性 需 切 割 1 像素 或 少 像素 的 
块 即 可 。 

pic 区 域 : 背景 带 底 纹 效果 ,前 景 为 图 片 ,切割 整个 图 片 所 在 区 域 ,以 利用 与 网 页 整 
体 相 融合 ,由 于 图 片 颜色 丰富 ,保存 为 .jpg 格式 。 

logo 区 域 : 文字 非常 用 浏览 器 字体 , 需 把 文字 作为 图 片 进行 切割 。 

intro 区 域 : 文字 为 宋体 ,效果 可 以 在 网 页 中 实现 不 需 切片 。 

llinks 区 域 : 文字 为 宋体 不 需 切片 ,项 目前 面 图 标 古 .要 进行 切片 ,保存 为 . gif 格式 
以 缩小 所 占 空间 。 
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技术 点 拨 : 
关于 对 背景 进行 切片 


设计 好 的 效果 图 ,要 进行 切片 优化 .导出 到 站 点 图 片 文件 夹 的 流程 ,以 获取 网 页 所 需 
要 的 图 片 元 素 , 在 切片 时 要 按 从 背景 到 前 景 的 顺序 进行 ,在 前 景 切片 时 要 按 从 上 到 下 ,从 
左 到 右 的 顺序 , 且 保留 空白 区 域 , 以 适合 二 维 图 片上 下 遮盖 的 技术 特点 。 一 般 背 景 可 由 背 
景色 与 背景 图 片 组 成 ,在 切片 时 主要 有 三 种 情况 。 

(1) 网 页 的 背景 仅 有 背景 色 , 这 种 情况 下 背景 不 需要 作 切 片 , 只 要 在 XHTML 进行 
整合 时 对 body 标签 的 背景 色 进 行 设置 就 可 以 。 

(2) 网 页 仅 有 背景 图 片 ,这 种 情况 下 要 以 图 片 的 效果 为 出 发 点 ,在 背景 图 较 大 的 情况 
下 ,可 以 采取 将 大 图 片 分 割 成 多 个 小 图 片 的 方法 来 实现 。 如 果 背 景 图 片 有 一 定 规律 可 循 
的 话 , 可 通过 CSS 对 小 图 片 进行 重复 来 完成 背景 图 片 的 重组 。 

(3) 当 背 景 图 包含 背景 色 和 背景 图 片 时 ,背景 色 不 用 作 切 片 , 背 景 图 切片 的 规律 同 第 
二 种 情况 。 


2 任务 实施 

(1) 隐藏 Container 背景 图 外 的 其 他 内 容 ,选择 切片 工具 区, 在 背景 中 绘制 出 切片 区 域 ， 
在 “属性 面板 ”中 设置 “ 宽 为 28px, 高 500px” 的 矩形 。 效 果 如 图 9-7 所 示 。 

(2) 从 “窗口 "菜单 中 打开 “优化 ”面板 ,从 中 选取 GIF 格式 进行 优化 。 

(3) 单 击 鼠 标 右键 ,选择 “导出 所 选 切 片 ”, 打 开 “ 导 出 ”窗口 ,效果 如 图 9-8 所 示 。 


点 面 
我 吏 文 档 _ 
| 
网 上 部 居 ertong155208110522 jpg ertong155845469958 jpg griljpg 


文件 名 加 : lcl ef 3 导出 


号 出 Es 取消 
Hu - 选项 (0) 
切片 (D): 导出 切片 总 

画 妈 已 选 切片 日 回避 当前 巾 册 
包括 无 切片 区 域 (O 


图 9-7 背景 切片 图 图 9-8 “导出 ”对 话 框 
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A (4) 设置 “文件 名 ”为 cl. gif,“ 导 出 ”选择 “ 仅 图 像 ”, 单 击 “ 导 出 ”按钮 ,完成 背景 图 片 的 切割 。 

(5) 打开 “层面 板 ” 中 所 有 隐藏 ,对 内 容 区 域 左 侧 的 图 片 进 行 切片 ,打开 “优化 ”面板 进行 
优化 为 .jpg 格式 ,并 导出 为 pic. jpg。 

(6) 对 内 容 区 域 右 侧 的 logo 图 片 进行 切片 ,打开 “优化 ”面板 进行 优化 为 . jpg 格式 ,并 
导出 为 logo. jpg。 

(7) 对 内 容 区 域 右 侧 的 链接 部 分 的 小 图 标 进行 切割 ,优化 为 . gif 格式 ,导出 为 6. gif。 

页 面 分 割 的 作用 是 把 大 的 网 站 元 素 ( 图 片 等 ) 内 容 进行 切割 ,将 大 划 小 ,提高 了 网 站 运行 
的 速度 ,页 面 分 割 的 原则 主要 是 以 “DIV "布局 的 区 域 进 行 切割 ,个 别 情况 可 以 按 特殊 需要 进 
行 切割 。 


9.5 添加 网 页 结构 和 样式 
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1 HIML 主 体 轮 廓 

在 网 页 设计 中 , 绝 大 多 数 网 页 都 是 骨髓 型 的 ,从 这 个 角度 来 说 网 页 主体 DIV 轮廓 一 般 
分 为 三 大 区 域 ,分 别 为 网 页 头 部 、 网 页 内 容 、 网 页 页 脚 ,但 在 实际 开发 中 为 了 方便 定位 , 且 保 
证 浏览 器 的 兼容 性 ,一 般 HTML 结构 主体 由 以 下 内 容 构 成 。 


<body> 
<div id "container"> 
<div id "header"> 


</div> 
<div id= "content"> 


2 
<div id "footer”> 
ai 
</div> 
< /body> 
当然 在 真正 制作 网 页 时 ,要 根据 效果 图 的 具体 情况 进行 合理 删改 ,如 在 图 9-6 中 可 以 看 
出 ,index. html 中 网 页 元 素 都 集中 在 网 页 内 容 区 域 ,不 能 界定 出 头 部 、 内 容 、 脚 部 ,因此 其 主 
体 结构 变化 如 下 : 
<body> 


<div id "container"> 


</div> 
< /body> 


2 HIML 主 体 轮廓 的 样式 
在 index. html 的 head 标签 对 之 间 添 加 link 标签 ,引用 相对 应 的 外 部 CSS 样式 表 , 代 码 
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如 下 所 示 。 
< link href- "style/index.css" rel= "styleshest" typer "text/css" /> 


打开 style 文件 夹 中 的 index. css 文件 ,添加 各 标签 的 CSS 样式 内 容 。( 关 于 CSS 样式 
内 容 添 加 方式 可 以 利用 Dreamweaver 所 提供 的 对 话 框 ,也 可 以 手工 添加 。) 


并 { 


margin:Opx; /* 设置 所 有 标签 外 边 距 为 零 * / 
Fadding:Opx; /* 设置 所 有 标签 内 边 距 为 零 * / 
} 
body { 


font- family: 宋体 "; 
font— size: 12px; 


text- align:centery /* 设置 文本 横向 居中 * / 
} 
# oontainer { 
width:100%; /* 设置 页 面 宽度 自 适应 * / 
margin- left:auto; /* 设置 区 域内 横向 居 左 * / 
margin- right:autoy /# 设置 区 域内 横向 居 右 * / 
技术 点 拨 : 
关于 固定 宽度 区 域 块 居中 问题 
当 页 面 宽 度 为 固定 值 时 ,由 于 CSS 没有 横向 居中 这 一 属性 ,一 般 可 采用 
margin- left:auto; /* 设置 区 域内 横向 居 左 于 oontainer* / 
margin- right:auto; /x 设置 区 域内 横向 居 右 于 containerx / 
及 
text— align:oenter; /* 设置 文本 横向 居中 于 body* / 
相 结 合 的 方式 。 
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在 当前 index. html 页 面 中 ,由 于 网 页 元 素 较 少 .因此 网 页 版 式 设计 将 网 页 页 头 部 分 与 内 容 
区 域 进行 艺术 组 合 ,分 成 了 pic 区 域 .aflash 区 域 .logo 区 域 intro 区域,llinks 区 域 五 大 部 分 。 


<div id "coontainer"> 


<div id "pic™> < /div> // 放 置 图 片 

< div id "aflash"> < /div> // 放 置 动画 

<div id- "ogo> < /div> // 放 置 网 站 标识 

<div id "intro™> < /div> // 放 置 宣传 文字 

<div id- "links"> < /div> // 放 置 链接 
</div> 


下 面 对 上 述 区 域 进行 逐一 技术 讲解 。 


{ Pm so 
a16 
1 利用 绝对 定位 确定 fic 区 域 位 置 
(1) HTML 结构 
pic 区 域 实际 上 就 是 一 个 图 片 的 添加 技术 ,只 要 利用 img 标签 说 明 图 片 来 源 及 相关 说 明 
即 可 。 
<div id "picn"> 
< img src= "images/pic.gif" alt=" 主 宣 图 片 " /> 
</div> 
(2) 添加 CSS 样式 结构 
关于 pic 区 域 的 样式 ,要 明确 两 点 : 一 是 固定 区 域 位 置 ,采用 绝对 定位 技术 ,以 当前 浏览 
器 作为 参照 ,利用 top、left、right、bottom 属性 明确 上 、 左 、 右 、 下 的 相对 位 置 。 
#pic{ 
position:absolute; 
top:5%; 
left:0%; 
width:100%; 
background:url (./images/cl.gif) repeat— x /* x 方向 重复 ,实现 小 图 片 平 铺 成 大 图 片 * / 
} 
二 是 对 图 片 的 效果 进行 设置 。 由 于 在 本 页 面 中 没有 特殊 效果 ,因此 不 需 重 复 设置 。 


2 利用 绝对 定位 确定 aflah 区域 位 置 

(1) HTML 结构 

aflash 区 域 用 于 放置 页 面 的 Flash 动画 宣传 视频 ,关于 加 载 的 详细 过 程 将 在 后 面 章节 
中 讲解 。 


<div ic "aflash"> 

i 

(2) 添加 CSS 样式 结构 

aflash 区 域 样式 要 明确 以 下 几 点 。 一 是 利用 绝对 定位 技术 position:absolute; 相 对 于 浏 
览 器 固定 位 置 ;二 是 利用 width、height 属性 明确 区 域 的 大 小 ;三 是 对 所 显示 的 效果 没 影 响 ， 
利用 border-top-style、border-right-style、border-bottom-style、border-left-style 属性 去 掉 区 
域 的 边框 线 。 


#aflash{ 
position:absolute; 
top:21%; 
left:40%; 
width :300px; 
height: 300px; 
border top- style: none; 
border- right— style: none; 
border- bottam style: none; 


El 
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border- left— style: none; We 
} 


3 利用 绝对 定位 确定 lo 区 域 样式 
(1) HTML 结构 
logo 区 域 从 技术 来 说 也 是 图 片 的 添加 ,请 参照 前 文 pic 区 域 实现 技术 。 


<div jd "logo"> 
< img src= "images/logo.gif" /> 
</div> 


(2) 添加 CSS 样式 结构 


# logo{ 
Position:absolute; 
top:5%; /* top,、 left 都 跟 #pic 一 样 */ 
left:70%; 
background- color:# FFFFFF7 
width:300px; 
} 


4 利用 绝对 定位 确定 inro 区 域 样式 
(1) HTML 结构 


intro 区 域 是 页 面 的 文字 区 域 ,关键 技术 在 于 显示 变化 的 效果 ,加 强 区 域 效 果 。 因 此 在 
这 里 利用 span 标签 以 细 化 个 别 文字 ,制作 不 同 效果 。 


<div id "intro"> 
口碑 源 于 品质 snbsp; 专业 练 就 品牌 <br /> 
无 限 创意 空间 snbsp; 生 活 锁定 精彩 <br /> 
装 < span> 墙 < /span> 作 < span> 饰 < /span> snbsp;srbsp; 真 情 呵护 snbsp;;<br /> 
来 自 每 适 家 居 ! 
</div> 


(2) 添加 CSS 样式 结构 
关于 本 区 域 样式 的 制作 ,除了 绝对 定位 ,设置 文字 颜色 ,字体 和 字号 ,固定 区 域 宽度 和 高 
度 之 外 ,还 加 了 区 域 背 景色 制作 。 都 是 比较 常用 的 设置 ,大 家 可 以 自己 试验 。 


# intro{ 
position:absolute; 
top:30%; 
left:70%; 
Color:# 716945; 
font- size:16px; 
font- style:normal; 
font— weight:boldy 
background- color:# FEFFFF; 
width:300px; 
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在 本 区 域 块 中 ,重点 来 说 明 一 下 利用 span 标签 来 进行 样式 变化 的 变化 。 


# intro span{ 
color:orange; 
font- style:italic; 

} 


技术 点 拨 : 
关于 span 的 使 用 技巧 


定义 和 用 法 : 所 span 盖 标签 被 用 来 组 合 文档 中 的 行内 元 素 。 

在 文字 页 面 排版 中 , 常 有 一 些 特殊 效果 需要 显示 如 粗 体 的 橘红 色 、 倾 儿 的 绿色 等 ,做 
法 是 使 用 span 元 素 , 那 么 span 元 素 中 的 文本 与 其 他 文本 不 会 有 任何 视觉 上 的 差异 , 当 应 
用 相应 的 样式 后 就 会 产生 视觉 上 的 变化 。 


5 关于 超 链接 区 域 liks 的 设计 
(1) HTML 结构 
链接 是 网 页 最 基本 的 特征 ,也 是 设计 与 制作 的 重点 内 容 。 在 llinks 区 域 设计 主要 包括 
有 链接 常用 属性 设计 、 利 用 UL 列表 设计 纵向 菜单 、 利 用 相对 定位 实现 鼠标 跳跃 等 ,因此 在 
结构 设计 上 要 排列 好 内 外 次 序 。 最 外 层 的 llinks 标签 用 于 定位 ,次 层 ul 用 于 设计 纵向 列 
表 , 最 内 层 的 a 标签 用 于 设计 链接 的 三 种 状态 。 
<div id- "llinks"> 
<ul> 
<1i><a href- "pagel.html"> snbspy snbsp; 效果 图 展示 < /a>< /1i> 
<1i><a href= 叶 "> gnbsp; snbsp; 设计 师 简 介 < /a>< /1i> 
<1li><ahre 全 啡 gnbsp; snbsp; 装饰 材料 < /a>< /1i> 
<1i><a href= 哇 "> gnbsp; gnbsp; 装饰 时 尚 < /a> < /1i> 
<1li><a href= 叶 "> gnbsp; snbsp; 论坛 < /a>< /li> 
<1i><a href= 哇 "> gnbsp; gnbsp; 客户 留言 < /a>< /1i> 
</aul> 
</div> 
(2) 添加 CSS 样式 结构 
根据 上 面 llinks 区 域 的 HTML 结构 分 析 可 知 ,整个 超 链 接 区 域 来 说 在 设计 CSS 样式 
时 也 要 按 标 签 的 次 序 从 外 向 内 , 逐 层 细 化 。 
O llinks 标签 的 样式 主要 是 区 域 背景 .区域 绝对 定位 、 宽 和 高 度 ,文字 颜色 .设计 字体 文 
字 加 粗 特 效 等 。 
#1links{ 
position:absolute; 
top:50%; 
left:70%; 
Color:# 716945; 
font- family:Arial, Helvetica, sans- serif; 
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font— size:14rx; 
font— style:nomrmal7 

font— weight:bold; 
background- color:# FFFFFF; 
width:300p; 


} 


@ 次 层 ul 列表 主要 是 设计 纵向 菜单 ,list-style 属性 的 作用 是 去 掉 ul 标签 默认 的 列表 
项 前 的 标记 ,以 利于 设计 合乎 页 面 的 新 标记 。 

#1links ul{ 

list- style:none; 

} 

@ li 标签 中 主要 有 三 个 设计 。 一 是 利用 background-image 属性 添加 了 自行 设计 的 列 
表 项 标记 ,并 且 利 用 background-repeat 属性 实现 标记 的 唯一 ;二 是 利用 background- 
position 属性 来 设计 小 标记 在 列表 项 中 的 位 置 ,本 任务 中 小 标记 距离 llinks 区 域 块 左边 
10px, 上 面 6px, 使 每 个 列表 项 都 能 排列 整齐 ;三 是 利用 padding 属性 ,在 列表 项 标记 和 文字 
之 间 添 加 小 间隔 ,加 强 了 视觉 效果 ,否则 会 出 现 拥 挤 的 现象 。 

#1links ul li{f 

Padding:Opx Opx Opx 10px; 

background- image: url (./images/6.gif); 
background- repeat: no- repeat; 
Packground- position: 10px Gpx; 

} 

@ a 标签 的 设计 最 为 精细 ,设计 点 主要 有 两 个 。 一 是 设计 a 标签 的 三 种 状态 , 即 a: 
link、a:visited、a:hover, 分 别 是 初始 状态 、 访 问 过 状态 、 鼠 标 滑 过 状态 ,在 设计 中 要 注意 到 三 
种 状态 的 顺序 不 能 变 ,但 可 以 将 两 种 状态 设计 成 相同 的 显示 效果 。 如 本 任务 中 关于 a:link 
和 al:visited 的 设计 。 对 于 这 两 种 状态 统一 利用 color 属性 设计 初次 显示 ,已 访问 过 的 字体 
颜色 ;利用 text-decoration 去 掉 a 标签 本 身 自 带 的 下 划 线 。 当 鼠标 在 超 链 接 上 滑 过 时 颜色 
发 生变 化 ,并 出 现 了 下 划 线 。 

二 是 在 常规 基础 效果 上 添加 新 的 特效 ,本 任务 中 添加 目前 网 页 上 常 采用 的 一 种 特效 ,鼠标 
跳跃 滑 过 。 实 现 技术 也 很 简单 ,首先 利用 position:relative; 设置 a: hover 的 定位 方式 为 相对 定 
位 , 接 下 来 利用 top:2px;left:2px; 实 现 鼠 标 滑 过 时 ,在 原来 的 位 置 发 生 向 右 下 2px 跳动 。 

#1links ul 1i a:link, #1links ul 1i a:visited{ 

color:# 2a3a00; 
text- decoration:none; 
} 
#1links ul 1i a:hover{ 
olor:# F90; 
text— decoration:underline; 
position:relative; 
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953 建立 网 页 页 脚 区 域 
一 般 来 讲 , 网 页 页 脚 主 要 有 版 权 信息 ,少量 超 链 接 、 网 站 访问 量 等 信息 组 成 ,不 太 受 到 重 
视 , 在 字体 设计 上 比 正 文字 号 略 小 。 但 事实 页 脚 区 域内 容 有 它 自 身 的 作用 ,如 通过 不 断 改动 
页 脚 的 超 链接 来 通知 搜索 引擎 页 面 内 容 正在 不 断 改动 ,等 等 。 
本 例 中 footer 区 域 设 计 很 简单 ,大 家 自己 实验 一 下 即 可 。 


9.6 常规 添加 Flash 动画 


对 于 企业 宣传 网 站 来 说 ,页 面 动 画 和 页 面 静态 图 片 , 给 人 以 生动 ,形象 的 感觉 ,会 吸引 浏览 
者 的 主要 视野 ,因此 在 本 网 页 中 动画 设计 要 充分 展示 公司 的 成 功 案 例 ,体现 公司 的 雄厚 势力 。 

1 Ha 动画 添加 过 程 

本 节 主 要 学 习 将 Flash 动画 加 入 指定 的 DIV 区 域 aflash 中 去 ,其 添加 过 程 如 下 所 示 。 

(1) 在 aflash 块 中 加 入 动画 aaa. swf, 动 画 存 放 在 images 文件 夹 中 。 本 块 的 作用 是 显 
示 动 画 文件 ,由 于 编码 较 多 ,我 们 利用 “设计 ” 窗 体 来 进行 操作 ,在 常用 工具 栏 中 单 击 甸 按 
钮 。 常 用 工具 栏 效 果 如 图 9-9 所 示 。 


疾 昌 加 外- 久 - 图- 轴 


图 9-9 常用 工具 栏 


(2) 弹出 “选择 文件 ”对 话 框 ,如 图 9-10 所 示 , 打 开 images 文件 夹 ,选择 aaa. swf 文件 ， 
单 击 “ 确 定 ” 按 钮 。 


站 点 根 目录 


选择 文件 名 自 :。。 回 广 件 系统 
数 犁 源 站 点 和 服务 器 


查找 范围 四: [加 insees ee 


入 -i a gf ertong1121085 
swt cgi |ertong1552081 
1swt chufang114928720563jpg 上 晴 ertong15s8454 


时 :” ehutang114945423153jpg onipg 


chufang152630611592jpg 中 jcont of 
文件 名 加: [ess mf FT 
文件 类 型 | 所 有 文件 @*) | 取消 


明 chutang1527311090120jpg 曙 molipg 


WRL: images/ aaa swf 参数 ,,，_ | 
相对 于 : 文 省 J mtitleal .html 
在 站 点 定义 中 更 改 默 认 的 链接 相对 于 


图 9-10 “选择 文件 ”对 话 框 
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设置 Flash 动画 的 加 载 . 定 位 方式 、 在 当前 浏览 器 窗 品 中 的 位 管 等 样式 。 


2 HIML 结 构 

添加 Flash 动画 后 ,给 HTML 结构 在 head 标签 和 aflash 标签 中 分 别 添加 如 下 代码 ,这 
种 方式 操作 简单 代码 的 添加 由 软件 来 完成 ,编码 的 难度 较 少 ,当然 这 些 代码 对 于 熟悉 
JavaScript 的 编码 者 来 说 ,可 以 手写 代码 来 完成 。 

head 标签 对 间 添 加 的 内 容 。 


<head> 
< script src= "Scripts/AC RmActiveContent.js" type= "text/javascript"> 
< /script> 

< /head> 


aflash 标签 对 间 添 加 的 内 容 。 


<div id "aflash"> 
< script typer "text/javascript"> 
BC_EL_ RmContent ( ' oodebase ', ' http://download. macramedia. oam/pub/shockwave/cabs/flash/ 
swflash.cab# version= 9,0,28,0', ‘width', "300', 
‘height', '300", 'title', 'aa', 'src', 'imeges/asa', 'quality', ‘high', 
"Pluginspage ', ' http://www. adcbe. ocm/shockwave/download/download. ogi? Pl _ Prod_ Version= 
ShockwaveFlash', "movie' 'images/aaa' ); //end RMC code 
< /script> 
<noscript> 
< hject classid= "clsid:D2TTB6E- RE6D- 11cf- 96B8- 444553540000" codebase= 
"http://download.macramedia.com/pub/shockwave/cabs/flash/swflash.cab# 
version= 9,0,28, 0" width= "300" height= "300" title= "aa"> 
< param name= "movie" value= "images/aaa.swf" /> 
< param name= "quality" value= "high" /> 
< ebed src= "images/aaa. swf" quality= "high" pluginspage= "http://www. adcbe. oam/shockwave/ 
download/download.ogi?P1 Prod Version= ShockwaveFlash" type= "application/x- shockwave- flash" 
width= "300" height= "300"> < /enbed> 
< /chject> 
< /noscript> 
</div> 


对 本 页 面 进行 整合 时 ,主要 利用 绝对 定位 和 相对 定位 技术 的 相互 结合 ,要 恰当 地 选择 绝 
对 定位 的 包含 容器 ,以 实现 将 网 页 元 素 进行 灵活 的 定位 。 


9.7 本 章 小 结 


在 本 章 主 要 讲授 了 绝对 定位 和 相对 定位 在 利用 DIV 十 CSS 进行 网 页 布局 中 的 作用 ,如 
何 将 绝对 定位 和 相对 定位 进行 结合 来 固定 网 页 元 素 的 位 置 ,以 及 这 两 种 定位 方式 所 适用 的 
网 页 类 型 。 


当今 社会 已 进入 了 信息 高 速 发 展 阶 段 , 数 字 化 革命 给 所 有 领域 带 来 新 的 冲击 。 随 着 计 
算 机 办 公 自 动 化 的 普及 ,电子 商务 应 运 而 生 , 一 切 都 归功 于 Internet 的 巨大 贡献 ,互联 网 的 
世界 里 覃 藏 无 限 生 机 。 彩 宇 商 贸 有 限 公司 的 领导 高 瞻 远 瞩 , 走 在 时 代 的 前 列 , 善 于 运用 现代 
化 的 手段 来 管理 企业 。 达 到 宣传 彩 宇 商 贸 有 限 公司 的 品牌 形象 、 提 高 公司 办 公 效 率 的 目的 。 


10.1 客户 需求 


对 于 一 个 商贸 公司 而 言 ,企业 的 品牌 形象 至 关 重 要 。 特 别 是 在 互联 网 技术 高 度 发 展 的 
今天 ,大 多 客户 都 是 通过 网 络 来 了 解 企 业 产品 .企业 形象 及 企业 实力 。 因 此 ,企业 网 站 的 形 
象 往往 决定 了 客户 对 企业 产品 的 信心 。 建 立 具 有 高 水 准 的 网 站 能 够 极 大 地 提升 企业 的 整体 
形象 。 客 户 需求 具体 内 容 有 以 下 两 个 方面 。 

1 优化 企业 内 部 管理 

企业 网 站 的 建设 将 会 为 企业 内 部 管理 带 来 一 种 全 新 的 模式 。 网 站 是 实现 这 一 模式 的 平 
台 。 在 降低 企业 内 部 资源 损耗 ,减低 成 本 、 加 强 企业 员工 与 员工 ,企业 与 员工 之 间 的 联系 和 
沟通 等 方面 发 挥 巨大 作用 ,最 终 使 企业 的 运营 和 运作 达到 最 大 的 优化 。 


2 增强 销售 力 

销售 力 指 的 是 产品 的 综合 素质 优势 在 销售 上 的 体现 。 销 售 的 成 功 与 否 ,除了 决定 于 能 
否 将 产品 的 各 项 优势 充分 地 传播 出 去 之 外 ,还 要 看 目标 对 象 从 中 得 到 的 有 效 信息 有 多 少 。 
由 于 互联 网 所 具有 的 “一 对 一 ”的 特性 ,目标 对 象 能 自主 地 选择 对 自己 有 用 的 信息 。 这 本 身 
已 经 决定 了 消费 者 对 信息 已 经 有 了 一 个 感 兴趣 的 前 提 。 使 信息 的 传播 不 再 是 盲目 地 强加 给 
消费 者 ,而 是 由 消费 者 有 选择 地 主动 吸收 。 同 时 ,产品 信息 通过 网 站 的 先进 设计 , 既 有 报纸 
信息 量 大 的 优点 ,又 结合 了 电视 声 、 光 、 电 的 综合 刺激 优势 ,可 以 牢 牢 地 吸引 住 目标 对 象 。 
此 ,产品 信息 传播 的 有 效 性 将 远 远 提高 ,同时 提高 了 产品 的 销售 力 。 

彩 宇 商贸 有 限 公司 是 一 家 专门 经 营 家 居 建 材 商 品 企业 ,其 业务 范围 主要 是 为 客户 提供 
家 居 建 材 商品 。 网 站 的 主要 作用 是 展示 企业 的 形象 与 商品 推广 ,增强 在 同类 企业 中 的 竞争 
力 ,为 客户 提供 较 完备 的 信息 服务 。 


10.2 网 站 分 析 


1021 网 页 主题 分 析 
根据 上 述 客户 需求 ,网 页 设计 师 的 工作 首先 是 将 文字 技术 档案 转化 为 网 页 元 素 所 能 表 


第 1 章 “ 形 字 商贸 公司 同 允 


(2 


现 的 形式 ,一 般 来 讲 主要 是 明确 客户 建站 目的 、 网 站 定位 、 栏 目 设计 ,语言 设计 、 网 站 功能 等 
要 求 ,来 体现 本 网 站 的 主要 内 容 。 

建站 目的 : 该 公司 是 一 家 专门 经 营 家 居 建 材 商品 企业 ,旗下 经 营 多 家 家 居 建 材 连 锁 超 
市 ,目前 ,经 营 范 围 已 涵盖 室内 外 装 漠 材 料 .工程 施工 材料 .绿色 建材 产品 多 种 品牌 工具 系 
列 、 家 居 生 活用 品 、 居 住 配套 等 系列 产品 。 公 司 建站 目的 是 进一步 提高 公司 档次 和 知名 度 ， 
为 客户 提供 优质 方便、 快捷 的 信息 服务 。 

网 站 栏目 设计 要 求 : 网 站 栏目 内 容 设置 包括 企业 文化 新品 推 荐 .加盟 我 们 、 店 面 展 示 、 
聚焦 华宇 、 成 功 经 验 分 享 等 相关 信息 。 

网 站 语言 设计 要 求 : 要 求 中文 版 本 。 

网 站 创意 设计 要 求 ， 

。 网 站 形象 首页 创意 设计 。 

。 内 容 首页 创意 设计 。 

。 使 用 jQuery 实现 网 站 动态 效果 。 

。 网 站 动态 旗帜 广告 (Banner) 。 

。 内 容 页 面 制作 ,动态 页 眉 美 工 合成 。 

网 站 售后 服务 要 求 : 
网 站 推广 (代理 收费 加 注 搜狐 .新浪 等 收费 门户 网 站 ;免费 加 注 国 内 其 他 排名 ,前 20 
家 非 收费 搜索 引擎 ) 。 
网 站 维护 (一 年 内 网 站 内 容 免费 更 新 ,不 改变 网 站 导航 结构 ) 。 
数据 库 系统 维护 (一 年 内 免费 , 含 数据 库 系统 数据 批量 上 传 .数据 备份 等 )。 
培训 两 名 维护 人 员 。 


1022 网 页 风格 定位 


网 页 设计 的 目的 就 是 为 了 突出 网 站 自身 特点 ,以 信息 内 容 得 到 理想 的 传达 为 前 提 。 
根据 网 站 的 主题 内 容 ,网 页 设计 的 整体 风格 要 靠 图 形 图 像 文 字 、 色 彩 、 版 式 、 动 态 效 果 来 
表现 。 


1 颜色 风格 


文字 链接、 栏目 等 都 以 绿色 .灰色 .象牙 色 进 行 设计 ,营造 了 本 网 站 绿色 环保 的 企业 文化 。 

2 版 式 设计 

版 式 设计 采用 了 以 图 示 为 诉 诸 方式 的 满 版 设计 模式 ,强调 了 页 面 的 整体 艺术 气息 。 

以 图 片 为 主 \ 文 字 为 辅助 的 内 容 结构 ,充分 利用 图 片 比 文字 更 具有 感召 力 的 特点 ,让 浏 
览 者 亲身 体会 到 企业 的 实力 与 水 平 。 

3 内 容 结构 风格 

不 同 的 主题 对 框架 、 色 彩 等 元 素 的 要 求 都 不 尽 相同 ,作为 宣传 网 站 ,要 点 是 吸引 用 户 
的 视野 ,本 项 目 是 商贸 网 站 ,在 风格 定位 上 要 给 浏览 者 舒适 的 感觉 ,充分 体现 企业 文化 和 
氛围 。 


寺 W&b 前 端 设计 与 制作 一 -HTML+ CSSrjQuery 
go 
i 4 语言 风格 
由 于 本 网 站 服务 的 对 象 是 中 国 区 域 用 户 ,语言 采用 中 文 版 。 
10.3 网 站 技术 准备 
网 站 主页 的 设计 主要 体现 商贸 公司 的 文化 与 形象 ,力求 给 浏览 者 一 种 亲和力 和 认 知 感 ， 
继而 让 客户 产生 了 解 更 多 信息 的 兴趣 。 围 绕 客户 的 需求 层面 有 针对 性 地 设计 实用 简洁 的 栏 
目 及 实用 的 功能 , 极 大 方便 客户 了 解 企业 的 服务 .咨询 服务 技术 支持 、 成 功 经 验 分 享 , 加 盟 我 
们 等 。 做 到 店面 展示 、 新 品 推荐 、 销 售 网 络 等 为 一 体 ,充分 帮助 客户 体验 到 贵 公司 的 全 系列 
民 务 。 
1031 网 页 效果 图 切片 


从 效果 图 中 利用 Photoshop 软件 切片 的 方式 提取 网 页 制作 中 所 需 的 文字 或 图 片 素材 。 
提取 的 原则 是 如 何 利用 层 (div) 来 组 合 该 页 的 规划 。 

1 顶部 

顶部 效果 如 图 10-1 所 示 。 


借 形 宇 


加 提要 re 续 400-677-3003 


首页 症 ie 取舍 jjr 昌 SE 


品 特 瑟 本 产品 中 心 


图 10-1 顶部 效果 图 


背景 : 页 面 body 背景 为 过 渡 色 ,只 需 纵 向 切割 1px 作为 背景 图 片 。 

top 区 域 : logo(174pxX 82px) 作 为 切片 切 出 ,文字 隐藏 。 提 取 “ 人 才 招 聘 ” 前 的 列表 

nav 区 域 : 提取 导航 条 背景 色 为 #d3e4c5 ,导航 条 文字 颜色 为 #1a8700, 下 拉 菜 单 文字 
颜色 # cfab6e。 

广告 区 域 : 提取 两 个 切换 按钮 ,保存 为 . jpg 格式 ,准备 所 有 广告 图 片 。 下 部 的 阴影 要 进 
行 切片 ,保存 为 .jpg 格式 。 

2 中 部 
中 部 效果 如 图 10-2 所 示 。 


把 昔 网 结 心 


10-2 ”中 部 效果 图 


企业 文化 行 : 隐 去 栏目 标题 微软 雅 黑 文字 ,内 容 列 表 宋体 文字 ,提取 背景 ,销售 网 络 整 


幅 切 出 。 


水 平分 隔 线 : 从 左 到 右 切割 成 一 张 图 片 。 

店面 展示 行 : 栏目 标题 文字 为 微软 雅 黑 ,内 容 列 表 为 宋体 不 需 切 片 ,其 中 展示 图 片 前 面 
已 经 提取 出 来 ,不 需要 重复 操作 。 

热 招 城市 行 : 隐 去 热 招 城市 栏目 中 的 文字 内 容 , 从 左 到 右 切 割 栏目 背景 。 

3 底部 

底部 效果 如 图 10-3 所 示 。 


梳 术 妆 必 :全 由 你 mpee 入 nam 为 分 


10-3 ”底部 效果 图 


底部 背景 : 隐 去 脚 部 内 容 , 纵 向 切 制 1px 作为 背景 图 片 。 
两 链接 图 片 : 分 别 切割 两 链接 图 片 。 
右 侧 图 : 切割 右 侧 “ 彩 宇 让 您 享受 高 品质 ”。 


1032 网 页 DV 区域 划分 


1 主页 效果 图 分 析 
主页 效果 图 的 设计 如 图 10-3 所 示 ,要 从 以 下 三 个 大 方面 人 手 进行 分 析 。 
(1) 色彩 设计 : 为 了 营造 出 家 居 建 材 商 品 企业 绿色 、 健 康 、 清 新 、 环 保 的 企业 文化 ,使 人 


调 。 页 面 中 的 文字 、 链 接 、 栏 目 等 都 以 绿色 、 灰 色 、 牙 色 进 行 设计 。 


(2) 图 片 设计 : 主页 面 以 产品 图 片 展示 为 主 ,通过 图 片 来 展示 公司 的 主要 产品 ,展示 产 


品 的 特点 和 效果 。 


(3) 布局 设计 : 主页 采用 了 上 下 结构 布局 模式 ,分 别 为 顶部 标志 区 (logo) .导航 区 .产品 


226) 


6 前 端 设计 与 制作 一 -HIML+ CSS+jQery 


2 利用 DIV 划 分 区 域 


从 主页 效果 图 可 以 看 出 ,根据 网 页 元 素 所 表达 的 内 容 , 采 用 自 上 而 下 的 DIV 十 CSS 结 
构 布 局 方式 ,能 为 用 户 提 供 良好 的 显示 和 体验 效果 。 
根据 所 存放 网 页 元 素 不 同 将 页 面 划 分 为 top、nav、 flashpic、 fourboxes、onetwothree、 
pointersbox、hotcity footer 等 DIV 区 块 。 具 体 页 面 划 分 如 图 10-5 所 示 ,主页 效果 如 图 10-6 
所 示 。 


主页 效果 图 的 设计 


栏目 介绍 区 


展示 区 企业 文化 等 栏目 介绍 区 、 底 部 版 权 信息 区 等 部 分 ,如 图 10-4 所 示 。 


top( 顶 部 logo 区 ) 


nav( 导 航 区 ) 


flashpic( 产 品 图 片 展示 区 ) 


fourboxes( 企 业 文化 等 栏目 区 ) 


onetwothree(123 分 隔 线 ) 


pointersbox( 店 面 展 示 等 栏目 区 ) 


热 招 城市 区 ) 


hotcity( 


底部 版 权 信息 区 。 ) 


footer( 底 部 版 权 信 息 区 ) 


图 10-4 主页 效果 图 布局 图 10-5 页面 划分 DIV 区 域 块 
偷 有 形 宇 400-677-3003 


CE" 


DE] r 


图 10-6 主页 效果 图 


10.4 添加 网 页 结构 和 样式 


1041 建立 网 页 主体 


1 HIML 主 体 轮廓 


< !DOCTYFE html> 
<head> 
<meta http- eqpiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 首 页 < /title> 
< /head> 
<body> 
<div class= "top"> < /div> 
<div class= "nav"> < /div> 
<div class= "flashpic"> < /div> 
< div class= "fourboxes"> < /div> 
< div class= "onetwothree"> < /div> 
< div class= "pointersbox"> < /div> 
<div class= "footer"> < /div> 
< /body> 
</html> 


2 HIML 主 体 轮 廓 的 样式 


@charset "utf- 8";» 

body, div, dl, dt, dd, ul, ol, li, pre, oode, form, fieldset, legend, input, button, textarea, p, blockquote 
{ margin: 0; padding: 0;/* overflow- x: hidden; * / font- size: lArx; } 

a {text— decoration:none;} 

a:hover {text- decoration:none;} 

body {background:url (.Vimages/bodybg.jpg) # fff top repeat— x;} 

.top {width:1002px;height:82px;margin:0 auto;} 


.nav {width:1002px;height:40px;background:# d3e4c5;margin:0 auto;} 


-flashpic {width:1002px; height: 38%px; padding:0 0 29px 0;background:url (./images/flashbtm 22.jpg) bottom 
no- repeat ;margin:0 auto;} 


.fourboxes {width:1002px;height:165px;margin:0 auto;} 
.anetwothree {width:1002px;height:60px;margin:0 auto;background:url (.Vimages/cnett.jpg) no- repeat;} 
.pointersbox {width:1002px;height:110px;margin:0 auto;} 


.hotcity fwidth:1000pxzheight:103pxzmargin:40px auto 0 auto;background:url (./images/hotcity 90.jpg) no- 
repeat;border:solid lpx # dddddd;} 


.footer fwidth:1002pxzheight:88pxzborder- top: solid lpx # fff;background: url (.Vimages/fbg 100.jpg) top 
repeat— x;margin:0 auto;} 


1042 建立 网 页 页 头 区 域 


1 HIML 结 构 


<div class= "top"> 
< div class= "logo"> <a href=# " title= "> < img src= "images/logo 04.jpg" width= "174" height= "82" 
/></a></div> 
< div class= "trlayer"> 
<uUl> 
<1i class= "trtel"> 400- 677- 3003< /li> 
<]i class= "trli2"> 全 国 免费 加 盟 热 线 < /1i> 
<]i class= "trli3"><a href= 叶 心 联系 我 们 </a>< /li> 
<1i class= "trli3"><a hre 全 啡 喀 人 才 招 聘 </a></]1i> 
</ul> 
</div> 
<div class= "clear>< /div> 
</div> 


<div class= "nav"> 
<u> 
<1i class= "navli"> 
首页 
< dl class= "navhoverbox"> 
<da class= "mairmenu"><a hre 全 啡 性 首 页 </a>< /db> 
</al> 
< /li> 
<1i class= "navli"> 
走 进 彩 宇 
< dl class= "navhoverbox"> 
<dd class= "mairmenu"> <a hre 伍 叶 吃 走 进 彩 字 < /a>< /db> 
< dd class- "navadl"> 建 材 超市 连锁 < /ad> 
<dd class= "navad2"> 行 业 先驱 < /ad 
< dd class= "navacammpnlistw><a href- 啡 性 企业 简介 </a></ad 
<dd class= "navacommpnlist"><ahre 人 只 董 事 长 致辞 </a>< /dd 
<dd class= "navaoommonlist"> <a hre 全 只 性 企 业 文化 </a></ad> 
<dd class= "navacampnlistw> <a hre 人 只 吃 组 织 架 构 </a></ad> 
<dd class= "navacomonlist"> <a hre 人 只 性 荣誉 资质 < /a> < /a> 
<dd class= "navacommnlistw><ahref- 啡 轨 合作 伙伴 </a></ad> 
</dl> 
</1> 
<1i class= "navli"> 


聚焦 彩 宇 


<dl class= "navhoverbox> 
< dd class= "mairmenu"> <a hre 全 啡 图 聚焦 彩 宇 </a></d 中 
<dd class= "navadlw> 建 材 超市 连锁 < /ad 
<da class= "navad2w> 行 业 先驱 < /az 
<dd class= "navacommnlist"> <a hre 全 啡 喀 企业 简介 < /a> < /ad 
< dd class= "navacommpnlistw><a href= 哇 吃 董 事 长 致辞 </a>< /ad 
<dd class= "navacoqmmonlist"><a hre 人 三 哇 吃 企 业 文化 </a>< /db> 
< dd class= "navacommonlist"><a hre 伍 啡 吃 组 织 架构 < /a>< /dd> 
< dd class= "navacamonlist"><a href= 叶 > 荣誉 资质 < /a>< /dm 
<dd class= "navacommnlistw> <ahre 全 只 必 合作 伙伴 </a></a> 
</dl> 
< /1i> 
<1i class= "navli"> 
招商 加 盟 
< dl class= "navhoverbox"> 
< dd class= "mairmenu"><a href= 哇 吃 招 商 加 盟 < /a>< /ad 
<dd class= "navadl"> 建 材 超市 连锁 < /ad> 
<dd class= "navad2"> 行 业 先驱 < /ad 
<dd class= "navacammonlist"> <a hre 人 只 必 企 业 简介 </a> < /db> 
< dd class= "navacommnlistw> <a hre 全 嘎 必 董事 长 致辞 </a>< /db> 
< dd class= "navacommpnlistw> <a hre 全 啡 必 企业 文化 </a></d> 
<dd class= "navacommonlistw> <a hre 全 只 吵 组 织 架构 < /a> < /ad> 
< dd class= "navacomonlist"> <a hre 人 只 性 荣誉 资质 < /a> < /db> 
< dd class= "navacommonlist"> <a hre 人 只 性 合作 伙伴 </a> < /ad 
</d> 
</li> 
<1i class= "navli"> 
品牌 营销 
< dl class= "navhoverbox"> 
<dd class= "mainmenu"><a hre 会 啡 性 品牌 营销 < /a>< /dd 
<dd class- "navadlw> 建 材 超市 连锁 < /ad> 
<dd class= "navad2"> 行 业 先驱 < /dd 
< dd class= "navacomonlist"> <a hre 人 -只 性 企 业 简介 </a></a 
<dd class= "navacamponlistw><a href- 啡 性 董 事 长 致辞 </a></dd> 
<dd class= "navacommonlist"> <a hre 全 啡 性 企 业 文化 </a></a 
<dd class= "navacammpnlistw> <a hre 人 只 史 组 织 架 构 </a>< /ad> 
<da class= "navacampnlistw><a hre 仁 啡 吃 荣 誉 资质 < /a> < /do> 
< dd class= "navacammonlistw> <a hre 伍 吃 合作 伙伴 < /a>< /a> 
</dl> 
<V/li> 
<1i class= "navli"> 
产品 中 心 
<dl class= "navhoverbox"> 
< dd class= "maimmenu"> <a hre 伍 吃 产品 中 心 </a>< /db> 
<da class= "navadl"> 建 材 超市 连锁 < /ad> 


<dd class= "navad2" > 行业 先驱 < /az 

< dd class= "navaccommonlist"> <a hre= 吃 企业 简介 < /a>< /a> 
< dd class- "navacommonlist"> <a hre 伍 哮 吃 董事 长 致辞 </a>< /od> 
<dd class= "navacqmmonlist"><a hre 人 三 哇 吃 企业 文化 </a>< /db> 
<dd class= "navacammonlistw> <a href= 吃 组 织 架构 < /a>< /db> 
<dd class= "navacommonlist"><a hre 全 啡 喧 荣誉 资质 < /a>< /at 
<da class= "navacammpnlistw><a hre 全 啡 合 作 伙伴 </a></ad 

</dl> 
</l> 
</u> 
</div> 


2 CSS 样 式 


.clear { clear:both; } 

:top {width:1002pxzheight:82pxzmargin:0 auto;} 

.logo {width:174px;height.:82px; float:left;} 

.trlayer {width:462px;height:auto;float:right;padding:30px 0 0 0;} 
.trlayer ul {} 

.trlayer ul 1i {float:right;height:52px;} 

.trtel {font:bold 24px/50px Arial;color:# 4aab3a;} 

.trli2 {font:14px/50px 微软 雅 黑 ;color:# 4aab3a;padding- right:15px;} 
.trli3 {background:url (./images/icol _07.jpg) left center no- repeat; text- indent: 13px; padding— right: 
17px;font:12px/52px 宋体 :color:# b5b5b5?} 

trli3 a {color:#b5b5b5;} 

.trli3 a:hover {color:# 4aab3a;} 


.nav {fwidth:1002pxzheight:40px?background:# d3e4c5;margin:0 auto;} 

.nav ul {height:40px;} 

.navli {width:166px; height: 40px; float:left;border- right: solid lpw # fff;text- align: oenter; font: 14px/ 
40px 宋体 ;color:# 1a8700;positicn:relative;} 

. navhoverbox {width: 164px; height: auto; border: solid lpx # de8c9; position: absolute; top: 0; left: 0; 
background:# fff;display:none;padding- bottam:12pxzz- index:50;} 

.mainmenu {width:164rx;height:39px;font:14px/40px 宋体 ;} 

-mainmenu a {color:# la8700;} 

-mainmenu a:hover {color:# cfab6e;} 

-navadl {width: 120px; height: auto; font: 14px/16rx 微软 雅 黑 ;margin:0 auto;padding: 12px 0 0 0; color:# 
cfab6eitext- align:left;} 

.navad2 {width:120px; height:auto; font:24rxV/26px 微软 雅 黑 ;margin:0 auto;padding:2px 0 12pe 0;color:# 
cfab6e;text- align:left;} 

.navacammonlist fwidth:120px;height:26px;border- bottam:solid lpx # e6e6e6?margin:0 auto;text— indent:2px; 
font:12px/2Gpx 宋体 ;text- align:left;} 

ist a {color:# cfab6e;} 

站 ist a:hover {color:# 1a8700;} 


1043 建立 网 页 内 容 区 域 


1 HIML 结 构 


<div class= "flashpic"> er 
< div class= "changeBox al" id "change 3"> 
<ahref= 啡 1" class= "a bigImg"> < img src= "images/1.jpg" width= "1002" height= "389" alt="™" /> 
</a> 
<ahre 全 啡 2" class= "a bigTmg"> < img src= "images/2.jpg" width= "1002" height= "389" alt="" /> 
</a> 
<ahre 全 啡 3" class= "a bigImg"> < img srcr= "images/3.jpg" width= "1002" height= "389" alt= mm /> 
</a> 
<ahref- 啡 4 class= "a bigImg"> < img src= "images/4.jpg" width= "1002" height= "389" alt="" /> 
</a> 


<ul class= "ul_ dhange a2> 


<1li>< spar> < /spar> < /1i> 
<1li>< spar> < /spar> < /1i> 
<1li>< spar> < /spar> < /1i> 
<li><spanr> < /spar> < /1i> 
</a> 
</div> 
</div> 


<div class= "fourboxes"> 
<div class= "foura"> 
<div class= "fatit"> 
< 户 企 业 文 化 < /E> 
<sEan><ahreE- 啡 "titler "更 多 必 < img src= "imeges/rore 03.png" widt 
"31" height= "6" alt= "更 多 " />< /a>< /span> 
</div> 
< div class= "facont"> 
<div class= "fapic"> 
<a href= i "> < img src= "images/picl.jpg" width= "73" height— 
"64" />< /o> 
</div> 
<div class= "far"> 
< 户 拼搏 是 一 种 历练 ,有 历练 才 有 收获 ; 
拼搏 是 一 种 气度 ,有 气度 才 有 魅力 ;< /p> 
</div> 
<div class= "clear"> < /div> 
</div> 
</div> 


< div class= "foura™> 
<div class= "fatit"> 
< 全 新 品 推荐 < /p> 
<span><ahre 全 啡 "title= 路 多 "> < img src- "images/more 03.png" width 


{sy 


"31" height= "6" alt=" 吨 多 " />< /a>< /span> 
</div> 
< div class= "facont"> 
<div class= "fapic"> 
<a href= 啡 改 <img sro= "images/picl.jpg" widthe "73" height= "64" />< /a> 
</div> 
< div class= "hotgoods"> 
<uUl> 
<1li><ahre 人 啡 史 单 层 挂 钩 整理 架 </a>< /li> 
<1li><ahre 全 只 必 单 层 挂钩 整理 架 < /a>< /li> 
<1li><ahre 全 啡 单 层 挂钩 整理 架 </a></1i> 
</a> 
</div> 
<div class= "clear"> < /div> 
</div> 
</div> 


< div class= "foura marOpx"> 
<div class= "fatit"> 
< 户 加 盟 我 们 < /p> 
<span> <ahre 全 啡 " title= "更 多 必 <img src- "images/more 03.png" width= 
"31" height= "6" alt= "更 多 " />< /a>< /span> 
</div> 
<div class= "facont"> 
<div class= "picjoin"> 
<a href= # "> < img src= "images/picjoin.jpg" width= "200" height= 
"65" />< /a> 
</div> 
</div> 
</div> 


<div class= "fourb"> 

<a href= # "> < ing srcr "imeges/mepper. jrg" widthe "239" height= "163" /></a> 
</div> 
</div> 


< div class= "cnetwothree"> < /div> 
<div class= "pointersbox"> 
<div class= "thecne"> 
<div class= "theltit"> 
< 户 店 面 展示 < /p> 
< span> <a href— 啡 "> < ing src= "images/rore 03.png" width "31" height— 
"6" /< /< /spar> 
</div> 
<div class= "theloont"> 


<div class= "fapic"> 
<a href= "4 "> < img srcr "images/picl.jpg" width= "73" height— 
"64" />< /a> 
</div> 
<div class= "onelist"> 
<u> 
<li><a hre 记 哇 吃 彩 宇 家 居 建 材 超市 富 奥 店 < /a>< /li> 
<1li><ahref= 哇 "> 彩 宇 家 居 建 材 超市 富 奥 店 < /a>< /1i> 
<li><ahre= 哇 吃 彩 宇 家 居 建 材 超市 富 奥 店 < /a>< /li> 
</up> 
</div> 
<div class= "clear"> < /div> 
</div> 
</div> 


<div class= "thetwo"> 
<div class= "the2tit"> 
< 了 > 聚焦 彩 宇 < /p> 
<sEan><ahref- # "> < ing src= "images/more 03.Png" widthr "31" height— 
"6" />< /ea> < /span> 


< /div> 
< div class= "the2oont"> 
<div class= "fapic"> 
<a href= "# "> < img src= "images/picl.jpg" width= "73" height— 
"6d" />< /a> 
</div> 
<div class= "twolist"> 
<ul> 
<li><a hre 伍 嘲 吃 彩 宇 家 居 建 材 超市 富 奥 店 < /a>< /li> 
<li><a hre 人 = 哇 心 彩 宇 家 居 建 材 超市 富 奥 店 < /a>< /li> 
<1li><a hre 伍 啡 吃 彩 宇 家 居 建 材 超市 富 奥 店 < /a>< /1i> 
</al> 
</div> 
< div class= "clear"> < /div> 
</div> 
</div> 


<div class= "thethree"> 
<div class= "the3tit"> 
< 户 成 功 经 验 分享 < /p> 
< pan> <a href- 啡 > < ing src= "images/more 03.png" widthr "31" height— 
"6" />< /ea>< /spar> 
</div> 
<div class= "the3oont"> 


许可 加 盟 历程 东 易 日 盛 连锁 经 营 体系 自 2001 年 创立 至 今 , 紧 紧 围绕 着 集团 发 展 战略 ， 
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不 断 进 行家 居 装 饰 业 特许 连锁 领域 商业 模式 的 升级 、 创 新 与 变革 ,打造 以 加 盟 ……<a 
hre 全 啡 力 坦 看 详细 ]< /a> 
</div> 
</div> 


<div class= "clear"> < /div> 
< /div> 


<div class= "hotcity> 
<p class= "bpl> 
<spar> 省 会 城市 :< /spar> 哈 尔 滨 ,长 春 , 沈 阳 、 南 京杭 州 、 天 津南 昌 、 合 肥 \、 武 汉 , 长 沙 , 福 
州 广 州 
</P 
<P class= "hp2"> 
< spar> 地 级 城市 :</span> 齐齐哈尔、 牡丹 江 , 佳 木 斯、 大 庆 、 鸡 西 、 双 鸭 山 、 伊 春 , 七 台 河 , 扒 
岗 黑河. 绥化. 吉林、 四平. 辽源 、 白 城 .白山 ,松原 、 延 边 、 大 庆 、 大 连 、 远 山 、 抚 顺 、 丹 东 、 锦 
州 .营口 .阜新 .辽阳 、 盘 锦 , 铁 岭 ,朝阳 ,葫芦 岛 , 杭 州 、 宁 波 、 温 州 .嘉兴 、 湖 州 、 绍 兴 、 金 华 , 衢 
州 . 舟 山 、 丽 水 ,台州 
< 人 > 
</div> 


2 CSS 样 式 


.flashpic {fwidth:1002pxzheight:389px;Padding:0 0 29px 0;background:url (.Vimages/flashbtm 22.jpg) bottam 
no- repeat ;margin:0 auto;} 
.changeBox al {float: left; width: 1002px; height.: 399px; padding: Opx; position: relative; border: Opx solid # 
aaa; } 
.changeBox al .a_ bigIng{position:absolute;top:Opx; left:Opx;display:none;} 
.UL_change a?2{position:absolute; left:50%; bottam:13px;overflow:hidden; margin- left:- 65px;} 
ul change a2 li{display: -mpz- inline- stack;display:inline- block; * display:inline; * zoam:1;} 
.UL_change_a2 span{display: - mz- inline- stack; display: inline- block; * display: inline; * zom:1; 
Padding:10px 12px; margin- right:2px;border:Opx solid # 999;background:url (./images/dianl .png) no- repeat; 
filter:alpha (opacity= 85) ;opacity:0.85;cursor:hand; cursor:pointer;} 
-ul_ change a2 span.on{background:url (.Vimages/dian2.Png) no- repeat;color:# O00000;} 


.fourboxes {width:1002px;height:165pmx;margin:0 auto;} 

.foura {width:239px; height:163px; border: solid lpx # did;background:url (./images/fourbg. jpg) no- repeat; 
float:left;margin— right:13px;} 

.fatit {width:239px;height:16rx;padding:20px 0 0 0;} 

.fatit p {foat:left;font:14 和 x/14ex 微软 雅 黑 :color:# 397513;display:inline;padding:0 0 0 15pzxz} 
.fatit span {float:right;padding:Spx 15px 0 0;} 

.facont {width:209px;height:auto;padding:14rx 0 0 0;margin:0 auto;} 

.fapic {width:80px;height:auto;float:left;} 

.fapic img {float:left;padding:2px;display:inline;border:solid lpx # dedede;margin— right:10px;} 
.far {color:#b5b5b5;font:12px/18px 宋体 ;width:120px;height:autoo;foat:right;} 

.far a {color:#b5b5b5} 


.far a:hover {color:# 1a8700;} We 


-hotgoods {width:120px;height:auto;float:right;} 

.hotgoods ul {} 

.hotgoods ul 1i {fwidth:120pxzheight:24px;background:url (./images/ico2.jpg) left center no- repeat;text— 
indent:10px;font:12px/24rx 宋体 ;} 

‘hotgoods ul 1i a {oolor:#b5b5b5;} 

.hotgoods ul 1i a:hover {color:# 1a8700;} 

.picjoin {text- align:oenter;} 

.picjoin img {border:solid lpx # dedede;padding:2px;} 


.fourb {width:239px;height:163m;border:solid lpx # did;float:right;} 

.marOpx {margin:Opx;} 

“PadOpx {padding:Opx;} 

.Onetwothree {width:1002px;height:60px;margin:0 auto;background:url (./images/onett.jpg) no- repeat;} 
.Pointersbox {width:1002pm;height:110px;margin:0 auto;} 

.theone {width:317px;height:110px;float:left;padding:0 0 0 30px;} 

.theltit {width:317px;height:30px;} 

.theltit p {float:left;display:inline;font:1 和 x/30px 微软 雅 黑 :color:# 397513;} 

.theltit span {float:left;padding:14rx 0 0 20px;} 

.theloont {width:317ew;height:auto;padding:Spx 0 0 0;} 

.onelist {width:210px;height:auto;float:right;padding:0 15px 0 0;} 

.anelist ul {} 

.onelist ul 1i {width:210px; height: 24px;background:url (.Vimages/ico2.jpg) left center no- repeat; font: 
12px/24px 宋体 ;text- indent:10px;} 

.Cnelist ul li a {color:#b5b5b5} 

.Cnelist ul 1i a:hover {color:# 1a8700;} 


.thetwo {width:37Ipx;height:110px;float:left;padding:0 0 0 Opx;} 

.the2tit {width:377px;height:30px;} 

.the2tit p {float:left;display:inline;font:14px/30px 微软 雅 黑 ;color:# 397513;} 

.the2tit span {float:left;padding:14rx 0 0 20px;} 

.the2cont {width:377px;height:auto;padding: Sex 0 0 0;} 

.twolist {width:270px;height:auto; float:right;padding:0 15px 0 0;} 

.twolist ul {} 

.twolist ul 1i {width:270px; height:24px;background:url (.Vimages/ico2.jpg) left center no- repeat; font: 
12px/24px 宋体 ;text- indent:10px;} 

.twolist ul li a {color:#b5b5b5} 

.twolist ul li a:hover {color:# la8700;} 

-twolist ul 1i.twolistreplus {width:270ps;height:24rx;background:url (./images/ico3 74.jpg) left center no 
一 repeat;font:12pm/24px 宋体 :test- indent:10px;} 

.twolist ul 1i.twolistreplus a {color:# 555555;} 

-twolist ul 1i.twolistreplus a:hover {color:# la8700} 


-thethree {width:263px;height:auto;float:left;} 


we .the3tit {width:263px;height:30px;} 
.the3tit p {float:left;display:inlineyfcnt:14px/30px 微软 雅 黑 ;color:# 397513;} 
.the3tit span {float:left;padding:14rx 0 0 20px;} 
.the3cont {color:#b5b5b5;font:12px/18px 宋体 ;padding:5px 0 0 0;} 
.the3cont a {color:# £00;} 
.the3cont a:hover {color:# 1a8700;} 


.hotcity {width:1000px;height:103p;margin:40px auto 0 auto;background:url (./images/hotcity 90.jpg) no- 
repeat;border:solid lpx # dddddd; } 

-hotcity p {font:12px/24px 宋体 ;color:#b5b5b5;} 

.hotcity p span {color:# 397513;} 

“hpl {padding:18px 10px 0 76rx;} 

.hp2 {padding: 0 10px 0 76px;} 

.hotcity p span a {color:# b5b5b5;} 

.hotcity p span a:hover {color:# 1a8700;} 
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<div class= "footer"> 
<div class="f1"> 
<p class= "fpl"> Copyright2012 All Rights Reserved 版 权 所 有 长 春 市 彩 宇 商贸 有 限 公 司 < /p> 
<P class= "fp2"> <a href= "httbp://wwwmiitbeian.gov.cn/" target=" blank> 吉 ICP 备 11005910 号 </a 
> 技术 支持 : <a href- "http://www.pangu.us" target=" blank" title= "盘古 网 络 -提供 基于 互联 
网 的 全 套 解决 方案 "> 盘古 网 络 < /a>< /p> 
</div> 
<div class= "fr"> 
<a href= 叶 "> < img src= "images/weibo 114.jpg" width= "98" height= "31" />< /a> 
<a href- 啡 必 < img srcr "imeges/shopbin 116.jpg" widthe ml22" height= "31" />< /a> 
</div> 
< div class= "clear"> < /div> 
< /div> 


2 C55 样式 


.footer {width:1002px; height.: 88px;border— top: solid lpx # fff;background: url (./images/fbg 100.jpg) top 
repeat— xsmargin:0 auto;} 

.所 {width:495px;height:89px;float:left;} 

.位 {width:505p; foat:right;height:88px;background:url (.Vimages/fbg 102.jpg) right top no- repeat;} 

.fpl {font:12px/1Gpx 宋体 ;color:#b5b5b5;padding:22px 0 0 20px;} 

.fh2 {font:12px/16px 宋体 ;color:#b5b5b5;padding:3px 0 0 20px;} 

.footer p a {color:#b5b5b5;} 

.footer p a:hover {color:# 1a8700;} 

.ff img {float:left ;margin: 0 Grmmargin_ top:35px;display:inline;} 


10.5 利用 jQuery 添加 网 页 特效 


1 加 载 jQuery 库 文 件 及 其 插件 文件 


< script type= "text/javascript" src= "js/jquery- 1.7.1.min.js"> < /script> 
< script typer "text/javascript" src= "js/jquery.soChange— min.js">< /script> 


说 明 : soChange 基于 jQuery 对 象 切 换 、 幻 灯 切 换 插件 。 
2 设计 导航 栏 和 产品 中 心 展示 动态 效果 


< script type= "text/javascript”" > 
$ (function() { 
$ (".navhoverbox") .each (functicn() { 


if($ (this) .children(".navacommpnlist") .html () ==nall) 


. 


$ (this) .css ({"padding":"0", "height":"38px "line— height": 


"38px"}); 


D; 


$ (".navli") .mouseover (function() { 
$ (this) .chilgren(" .navhoverbox") .slideDown (500); 
}) .mpuseleave (function() { 
$ (this) .children (" .navhoverbox") .slideUp (100); 
Ds; 
Ds; 
$ (".navli:last") .css ("border", "0") 
$ (# change 3 .a bigImg') .soChange({ 
thunbcbj : "# change 3 .ul_change a2 span', 


thurbNowclass:'on'， ”// 自 定义 导航 对 象 当前 class 为 on 


changeTime:4000 // 自 定义 切换 时 间 为 4000ms 
D; 
$ (".twolist ul 1i:first") .addclass ("twolistreplus"); 
< /script> 


3 处 理 浏览 器 兼容 问题 


<!--[if TE6> 

< SCRIFPT src= "http://www.ec.hc360.0om/js/iepng.js"> < /SCRIPT> 
<SCRIPT> 

DD belatedPNG.fix("divvimgapanv,livdtvarh4, .on, .newptit, ') 

< /SCRIPT> 

< ![endif]--> 
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10.6 本 章 小 结 
本 章 通 过 介绍 商贸 公司 网 站 开发 过 程 ,掌握 企业 网 站 前 端 开发 流程 ,重点 掌握 网 页 的 结 


构 、 表 现 和 行为 的 设计 与 制作 ,难点 是 利用 jQuery 进行 页 面 行为 特效 设计 。 通 过 本 章 学 习 
将 为 网 站 前 端 设计 奠定 必要 的 项 目 开 发 基础 。 


弘 叶 美 容 美发 公司 网 站 


互联 网 时 代 , 企 业 应 尽早 建设 属于 自己 的 企业 网 站 , 借 此 洞察 消费 者 需求 ,改善 销售 服 
务 的 效果 ,扩大 市 场 机 会 ,早日 进行 电子 商务 的 实践 ,感受 电子 商务 的 博大 魅力 ,把 握 网 络 时 
代 带 来 的 巨大 商机 。 弘 叶 美 发 公司 力求 通过 网 站 的 建立 ,使 美容 美发 公司 同 其 合作 伙伴 、 客 
户 之 间 建 立 良 好 的 关系 、 完 善 企 业经 营 模式 、 提 高 企业 运营 效率 ,达到 宣传 弘 叶 美 发 公司 的 
品牌 形象 和 提高 服务 质量 和 经 营业 绩 的 目的 。 


11.1 客户 需求 


对 于 美容 美发 公司 而 言 , 企 业 的 品牌 形象 至 关 重 要 。 特 别 是 在 互联 网 技术 高 度 发 展 的 
今天 ,大 多 客户 都 是 通过 网 络 来 了 解 企业 产品 、 企 业 形象 、 企 业 实力 的 。 因 此 ,企业 网 站 的 形 
象 往往 决定 了 客户 对 企业 产品 的 信心 。 建 立 具 有 高 水 准 的 网 站 能 够 极 大 地 提升 企业 的 整体 
形象 。 客 户 需求 具体 内 容 有 以 下 几 点 。 

(1) 展示 形象 : 树立 企业 形象 ,展示 企业 实力 ,宣传 企业 文化 ,建立 企业 品牌 。 

(2) 展示 发 型 : 发 布 发 型 信息 ,为 访客 提供 发 型 详细 信息 。 

(3) 交流 反馈 : 提供 交流 反馈 功能 ,允许 访客 在 线 提交 信息 与 公司 交流 。 

(4) 提供 资讯 : 及 时 发 布 企 业 信息 、 最 新 活动 、 产 品 动态 。 

(5) 招聘 人 才 : 发 布 公司 人 才 招 聘 信息 ,管理 应 聘 者 在 线 提交 个 人 简历 。 

(6) 提供 热线 : 提供 各 分 店 服务 热线 电话 。 

弘 叶 美发 公司 是 一 家 专业 的 美容 美发 公司 ,其 业务 范围 主要 是 为 客户 提供 美容 美发 和 
宾馆 经 营 服务 。 网 站 的 主要 作用 是 展示 企业 的 形象 .增进 美容 美发 公司 同 客户 之 间 的 关系 、 
增强 在 同类 公司 中 的 竞争 力 ,为 客户 提供 较 完备 的 信息 和 资讯 服务 。 


11.2 网 站 分 析 


卫 21 网 页 主题 分 析 


根据 上 述 客 户 需求 ,网 页 设计 师 的 工作 首先 是 将 文字 技术 档案 转化 为 网 页 元 素 所 能 表 
现 的 形式 。 一 般 来 讲 主要 是 明确 客户 建站 目的 、 网 站 定位 ,栏目 设计 、 语 言 设计 、 网 站 功能 等 
要 求 ,来 体现 本 网 站 的 主要 内 容 。 

建站 目的 : 弘 叶 美发 公司 是 一 家 专业 的 美容 美发 公司 ,其 业务 范围 主要 是 为 客户 提供 
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美容 美发 和 宾馆 经 营 服务 。 公 司 建站 目的 是 以 进一步 提高 公司 档次 和 知名 度 ,为 客户 提供 
优质 方便 与 快捷 的 信息 服务 。 

网 站 栏目 设计 要 求 : 网 站 栏目 内 容 设置 包括 公司 文化 展示 、 最 新 资讯 .发 型 展示 、 服 务 
热线 等 相关 信息 。 

网 站 语言 设计 要 求 : 要 求 中 文 版 本 。 

网 站 创意 设计 要 求 : 

。 网 站 形象 首页 创意 设计 。 

。 内 容 首页 创意 设计 。 

。 使 用 jQuery 实现 网 站 动态 效果 。 

。 网 站 动态 旗帜 广告 (Banner) 。 

。 内 容 页 面 制作 ,动态 页 眉 美工 合成 。 

网 站 售后 服务 要 求 : 

。 网 站 推广 (代理 收费 加 注 搜狐 、 新 浪 等 收费 门户 网 站 ;免费 加 注 国内 其 他 排名 ,前 20 

家 非 收 费 搜索 引擎 )。 

。 网 站 维护 (一 年 的 网 站 内 容 免费 更 新 ,不 改变 网 站 导航 结构 ) 。 

。 数据 库 系统 维护 (一 年 内 免费 , 含 数据 库 系统 数据 批量 上 传 ,数据 备份 等 )。 

。 培训 两 名 维护 人 员 。 

于 22 网 页 风格 定位 

网 页 设计 的 目的 就 是 为 了 突出 网 站 自身 特点 。 以 信息 内 容 得 到 理想 的 传达 为 前 提 , 根 
据 网 站 的 主题 内 容 , 网 页 设计 的 整体 风格 要 靠 图 形 图 像 文字、 色彩 版式、 动态 效果 来 表现 。 

1 颜色 风格 

主 色调 采用 了 纯 白 色 , 以 浅 灰色 和 绯 色 为 辅助 色彩 。 页 面 中 的 文字 、 链 接 、 栏 目 等 都 以 
绯 色 、 灰 色 、 黑 白色 进行 设计 ,利用 红 白 灰 营 选 了 本 网 站 时 尚 的 企业 文化 。 

2 版 式 设计 

版 式 设计 采用 了 以 图 示 为 诉 诸 方 式 的 满 版 设计 模式 ,强调 了 页 面 的 整体 艺术 气息 。 

以 图 片 为 主 、 文 字 为 辅助 的 内 容 结构 ,充分 利用 图 片 比 文字 更 具有 感召 力 的 特点 ,让 浏 
览 者 亲身 体会 到 企业 的 实力 与 水 平 。 

3 内 容 结构 风格 

不 同 的 主题 对 框架 、 色 彩 等 元 素 的 要 求 都 不 尽 相 同 , 作 为 宣传 网 站 ,要 点 是 吸引 用 户 的 
视野 ,本 网 站 在 风格 定位 上 要 给 浏览 者 舒适 的 感觉 ,充分 体现 企业 文化 和 氛围。 

4 语言 风格 

由 于 本 网 站 服务 的 对 象 是 中 国 区域 用 户 ,语言 采用 中 文 版 。 


11.3 网 站 技术 准备 


网 站 主页 的 设计 主要 体现 弘 叶 美 发 公司 文化 与 形象 ,力求 给 浏览 者 一 种 亲和力 和 认 知 
感 ,继而 让 客户 产生 了 解 更 多 信息 的 兴趣 。 围 绕 客户 的 需求 层面 有 针对 性 地 设计 实用 简洁 
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的 栏目 及 实用 的 功能 , 极 大 方便 客户 了 解 本 公司 的 服务 。 最 新 资讯 .发 型 展示 、 服 务 热线 等 
一 系列 需求 在 贵 公司 网 站 上 逐个 得 到 满足 。 做 到 店面 展示 、 最 新 资讯 .发 型 展示 等 为 一 体 ， 
使 客户 充分 体验 到 贵 公司 的 全 系列 服务 。 
二 31 网 页 效果 图 切片 
从 效果 图 中 利用 Photoshop 软件 切片 的 方式 提取 网 页 制作 中 所 需 的 文字 或 图 片 素材 。 

提取 的 原则 是 如 何 利用 层 (div) 来 组 合 该 页 的 规划 。 

1 顶部 

顶部 效果 图 如 图 11-1 所 示 。 
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图 11-1 顶部 效果 图 


背景 : 页 面 body 背景 为 白色 ,不 需要 使 用 图 片 。 
header 区 域 : 包括 Logo 和 导航 , 隐 去 内 容 切割 1px 图 片 作为 背景 。 还 要 提取 出 带 背 景 
的 导航 元 素 图 片 和 logo(170pxX104px) 图 片 。 
企业 环境 动态 展示 区 域 : 提取 两 个 切换 按钮 ,保存 为 .jpg 格式 ,准备 所 有 展示 图 片 。 
2 中 部 
中 部 效果 图 如 图 11-2 所 示 。 


0431-88604455 


图 11-2 中 部 效果 图 


最 新 资讯 : 隐 去 栏目 中 文字 , 切 出 发 型 图 片 ,选取 十 more 和 列表 前 符号 另存 为 . jpg 格 
式 图 片 。 

发 型 展示 : 准备 出 所 有 滚动 图 片 。 

服务 热线 : 隐 去 服务 热线 及 电话 文字 内 容 , 切 割 带 留 言 板 内 容 的 背景 图 片 。 


{ Ec 


3 底部 
底部 效果 图 如 图 11-3 所 示 。 
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图 11-3 底部 效果 图 


底部 背景 : 使 用 灰色 Logo 标志 。 
底部 中 的 横 线 使 用 div 上 边框 实现 ,颜色 为 #ababab, 类 型 为 solid、1px, 不 需要 做 
切片 。 


革 32 网 页 DV 区 域 划 分 


1 主页 效果 图 分 析 

主页 效果 图 的 设计 如 图 11-3 所 示 ,要 从 以 下 三 个 大 方面 和 人手 进行 分 析 。 

(1) 色彩 设计 : 为 了 营造 出 本 网 站 时 尚 的 企业 文化 。 主 色调 采用 了 纯 白 色 , 以 浅 灰色 
和 绯 色 为 辅助 色彩 。 页 面 中 的 文字 、 链 接 、 栏 目 等 都 以 绯 色 、 灰 色 、 黑 白色 进行 设计 。 

(2) 图 片 设计 : 主页 面 以 公司 环境 图 片 展示 为 主 ,通过 图 片 来 展示 公司 的 形象 。 

(3) 布局 设计 : 主页 采用 了 上 下 结构 布局 模式 ,分 别 为 顶部 标志 区 (Logo)、 顶 部 导航 
区 ,公司 环境 展示 区 、 最 新 资讯 等 栏目 介绍 区 、 底 部 版 权 信息 区 等 部 分 ,如 图 11-4 所 示 。 


2 利用 DIV 划分 区 域 

从 主页 效果 图 可 以 看 出 ,根据 网 页 元 素 所 表达 的 内 容 , 采 用 自 上 而 下 的 DIV 十 CSS 结 
构 布 局 方式 ,能 为 用 户 提供 良好 的 显示 和 体验 效果 。 

根据 所 存放 网 页 元 素 不 同 将 页 面 划分 为 top、nav、 flashpic、 fourboxes、onetwothree、 
pointersbox、hotcity、footer 等 DIV 区 块 。 具体 页 面 划 分 如 图 11-5 所 示 ,主页 效果 如 图 11-6 
所 示 。 


主页 效果 图 的 设计 
项 部 标志 区 
项 部 导航 区 
I 
nav( 导 航 nav 区 ) 
栏目 介绍 区 flashpic( 公 司 环境 展示 区 ) 
一 (底部 版 权 信息 区 。 ) footer( 底 部 版 权 信 息 区 


图 11-4 主页 效果 图 布局 图 11-5 页 面 划 分 DIV 区 域 块 
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图 11-6 主页 效果 图 


11.4 添加 网 页 结构 和 样式 


二 41 建立 网 页 主体 


1 HIML 主 体 轮 廓 


< !DOCTYER html> 
<html> 
<head> 
< meta http- eqpiv= "Content- Type" content= "text/html; dharset=utf- 8" /> 
<title> 首 页 < /title> 
< link rel= "stylesheet" type= "text/css" href= "css/master.css"> 
< /head> 
<body> 
<div class= "headbg"> 
<div class= "header"> < /div> 
</div> 
<div class= "flashpic"> < /div> 
<div class= "minoon"> < /div> 
<div class= "footer"> < /div> 
< /body> 
</htnl> 


2 HIML 主 体 轮 廓 的 样式 


Q@charset "utf- 8";» 


body, div, dl, dt, od, ul, ol, li, pre, cpde，fomm fieldset, legend, input, button, textarea, p, blockquote 
{ margin: 0; padding: 0;/* overflow- x: hidden; * / font- size: 12px; } 

ul li, dl, dt, dd ol { display: block; list- style: none; } 

-Clear { clear:both; } 

a {text- decoration:none;} 

a:hover {text— decoration:none;} 


body {background:# fff;overflow- x:hidden;} 
.headbg {width:100%;height:104px;background:url (.Vimages/topbg.jpg) repeat— x;} 


-heager {width:1002px;height:104rx;margin:0 auto;} 


.flashpic {width:100% ;height.:485px;margin:0 autozborder- bottam:solid lpx 
# 838383;border- bottam: solid lpx # 6d6d6d;} 


mainoon {width:1002px;height:auto;padding:10px 0 Bex 0;margin:0 auto;} 


.footer {width:1002%x; height: 66px;margin:0 auto;border— top: solid lpx # ababab;background:url (.Vimages/ 
fooerbg 03.jpg) top right no- repeat;} 


二 42 建立 网 页 页 头 区 域 


1 网 页 头 部 HIML 结 构 


< div class= "headbg"> 
<div class= "header"> 
< div class= "logo"> <a href= 叶 "> < jmg src= "images/logo 04.jpg" width= 
"170" height= "104" />< /a> < /div> 
<div class= "nav> 
<ul> 
<1li><ahre 全 嘎 " class= "navl navlreplus 必 </a></li> 
<li><ahref="#"class= "nav2"></a></1i> 
<li><ahref=#"class= "nav3> < /a></li> 
<Jli><ahre 全 啡 " class=- "nav4"></a></1i> 
<Ti><ahre 全 啡 "class= "nav5></a>z</1i> 
<1li><ahre 全 啡 " class= "nav6></a></1i> 
<li><ahref= #4"class= "nav7></a></1i> 
<li><ahref= 4"class= "nave"></a></li> 
</ul> 
</div> 
<div class= "clear"> < /div> 
</div> 
</div> 


2 网 页 头 部 CSS 样 式 


第 11 章 “ 弘 叶 美 鹤 美 妥 公司 网 邓 》 


headhy fwidth:1008;height:10 和 xzbacgroundurl (./images/topbg. jpg) repeat— x;} 
.header {width:1002px;height:104re;margin:0 auto;} 

.logo {width:170ps;height:104rx; float:left;} 

.nav {width:77Grx;height:104px; float:right;} 

-nav ul {} 

.nav ul li {width:83px;height:104rm; float:left;margin:0 Tex;} 
nav ul li a {width:83rx;height:104px;display:block;} 

.navl {background:url (./images/navl 06.jpg) no- repeat;} 
-nav2 {background:url (./images/nav2 08.jpg) no- repeat;} 
.nav3 {background:url (.Vimages/nav3 10.jpg) no- repeat;} 
-nav4 {background:url (.Vimages/nav4 12.jpg) no- repeat;} 
.nav5 {background:url (.Vimages/nav5 14.jpg) no- repeat;} 
-nav6 {background:url (.Vimages/nav6 16.jpg) no- repeat;} 
-nav7 {background:url (.Vimages/nav7 18.jpg) no- repeat;} 
-nav8 {background:url (./images/nav8_20.jpg) no- repeat;} 


-navl :hover {background:url (.Vimages/navhover1.jpg) no- repeat;} 
.nav2:hover {background:url (.Vimages/navhover2.jpg) no- repeat;} 
.nav3:hover {background:url (./images/navhover3.jpg) no- repeat;} 
.nav4:hover {background:url (./images/navhover4.jpg) no- repeat;} 
.nav5:hover {background:ur] (./images/navhover5.jpg) no- repeat;} 
.nav6:hover {background:ur] (.Vimages/navhover6.jpg) no- repeat;} 
.nav7:hover {background:url (./images/navhover7.jpg) no- repeat;} 
.nav8:hover {background:ur] (./images/navhover8.jpg) no- repeat;} 


.navlreplus {background:url (.Vimages/navhover1.jpg) no- repeat;} 
.nav2replus {background:url (./images/navhover2.jpg) no- repeat;} 
.nav3replus {background:url (.Vimages/navhover3.jpg) no- repeat;} 
.nav4replus {background:url (./images/navhover4.jpg) no- repeat;} 
.nav5replus {background:url (./images/navhover5.jpg) no- repeat;} 
.navéreplus {background:url (./images/navhover6.jpg) no- repeat;} 
.navireplus {background:url (./images/navhover7.jpg) no- repeat;} 
.navBreplus {background:url (.Vimages/navhover8.jpg) no- repeat;} 


二 43 建立 网 页 内 容 区 域 


1 网 页 内 容 区 域 HIML 结 构 


<div class= "flashpic"> 
< div class= "changesBox al" id "change 3"> 
<a href=# 1" class= "a bigImg'> < img src= "images/1.jpg" height= "485" 
at="™ />< /> 
<a href= 啡 2" class= "a biglmg"> < img src= "images/2.jpg" height= "485" 
at="™ />< /a> 
<a href="# 3" class= "a bigImg"> < img src- "images/3.jpg" height= "485" 
at=™ /></a> 


作 一 HIML+ CSSrjQery 


= <a href- 啡 加 class= "a biglmg'> < img srcr "images/4.jpg" height= "485" 
at="™" /></a> 
<a href- 啡 5" class= "a bigImg"> < img srcr "images/5.jpg" height= "485" 
alt="™ /></a> 


<ul class= "ul dhange a2"> 
<li><spanr> < /spar> < /1i> 
<li><spar>< /spar> </1> 
<li>< stanr> < /spar> < /1i> 
<li><spar> < /spar> </1> 
<li>< spar> < /spar> < /1i> 

</ul> 
</div> 
</div> 


<div class= "maincon'> 
<div class= "ml"> 
<div class= "newnewstit"> 
<p> {最 新 资讯 j< /p> 
< span> <a href= 啡 必 < jnmg sro= "images/rmorebnt..jpg" widthr "32" height— 
"3" />< /< /span> 
</div> 
<div class= "newsl"> 
<div class= "newslpic"> 
<a href= # "> < img src= "images/picl 29.jpg" width= "92" height= 
ml ></a> 
</div> 
<div class= "newslr"> 
<p class- "newslsttit"><a hre 人 后 啡 必 朝 阳 区 弘 叶 美发 立信 街 店 < /a>< /p> 
<div class= "newslrt"> 
<P class= "newslrtext"> 
朝阳 区 弘 叶 美发 立信 街 店 信 街 朝 
朝阳 区 弘 叶 美发 立信 街 店 
< 人 锭 
<p> < span> <a href= "# "> < img src= "images/morebnt.jpg" width= 
"32" height= "13" />< /a>< /spar> < /p> 
</div> 
</div> 
<div class= "clear"> < /div> 
</div> 
<div class= "nnewlist"> 
<Ul> 
<1li><P><ahre 人 只 必 朝阳 区 弘 叶 美发 立信 街 店 </a>< /pe></1i> 
<1li><PE><ahre 全 啡 必 朝 阳 区 弘 叶 美发 立信 街 店 </a></E><]i> 
</al> 


</div> 
</div> 


<div class= "mm"> 


< div class= "newnewstit"> 
<E> { 发 型 展示 jx /p> 


</div> 


< span> <a href= i "> < img srcr "imeges/rorent. .jpg" widthr "32" height- 


"3" /< /< /span> 


<div class= "rollpic"> 
<div id "demo"> 
<div id "indemo> 
<div id "dempl> 


<a href= # "> < img sro= "images/pic3 32.jpg" width= "98" height— 
"126" />< /> 
<a href= # "> < img src= "images/pic3 32.jpg" width= "98" height= 
"126" />< /a> 
<a href= "# "> < img src= "images/pic3 32.jpg" width= "98" height= 
"126" />< /o> 
<a href= # "> < img src= "images/pic3 32.jpg" width= "98" height= 
"26" />< /a> 
<a href= "4 "> < img src= "images/pic3 32.jpg" width= "98" height= 
"26" />< /a> 
<a href= # "> < img src= "images/pic3 32.jpg" width= "98" height= 
"26" />< /ea> 


</div> 
<div id "demo2"> < /div> 
</div> 
</div> 


</div> 
</div> 


<div class= "mr"> 
<div class= "newnewstit"> 


</div> 


< div class= "connectways"> 
<div class= "ctel> 


<P class= "cplst"> 服 务 热 线 < /p> 
<P class= "cp2nd"> 0431- 88604455< /p> 


</div> 
<div class= "guest link><ahre 会 啡 "title= "留言 板 必 </a></diw> 


</div> 
</div> 


<div class= "clear"> < /div> 


</div> 


2 网 页 内 容 区 域 GSS 样式 


.flashpic fwidth:1008;height:485pexzmargin:0 auto;border— bottam:solid lpx 
# 838383;border- bottam:solid lpx # 6d6d6d;} 

.changsBax al{float:left;width:100%;height:485p; padding:Opx;position:relative;border:Opx solid # aaa; } 
.changeBox al .a_bigImg{position:absolute;top:O0px; left:0px;display:none;} 

.ul_ change a2{position:absolute; left:50%; bottam:13m;overflow:hidien; margin 

left:- 65px;} 

ul change a2 li{display: -mpz- inline- stack;display:inline- block; * display:inline; * zoom:1;} 
-UL_change_a2 span{display: - moz- inline- stack; display: inline- block; * display: inline; * zoom: 1; 
Padding:10px 12px; margin- right: Apx; border: 0px solid # 999; background: url (.Vimages/bucn.Png) np- repeat; 
五 lter:alfha (qracity= 85) ;opacity:0.85;cursor:hand; cursor:pointer;} 

-ul change a2 span.on{background:url (./images/on.png) no- repeat;color:# 000000;} 


.mainoon {width:1002px;height:auto;padding:10px 0 Sex 0;margin:0 auto;} 

ml {width:262px;height:auto;float:left;padding- left:Ax;margin— right:48px;} 
.newnewstit {width:100%;height:23px;border- bottam:dotted lpx # 666666;} 
-newnewstit p {foat:left;font:1Grx/23px 微软 雅 黑 ;oolor:# 901919;display:inline;} 
.newnewstit span {float:right;margin:Spx 了 0 0;} 

.newsl {width:262px;height:7lpx;padding- top: Fx;} 

.newslpic {width:90px;height:7lpx;float:left;} 

newslr {width:162px;float:right;} 

.newslsttit {font:12px/18px 宋体 ;} 

.newslsttit a {color:# 666;} 

.newslsttit a:hover {color:# 901919;} 

-newslrtext {font:12px/16px 宋体 ;color:# 666;padding:3px 0;} 

.newslrt {border- bottoM:dotted lpx # 887755;width:162px; } 

.nnewlist {width:262px;height:auto;} 

.nnewlist ul {} 

.nnewlist ul li {width:262px;height:28px;border- bottam:dotted lpx # 666;} 
.nnewlist ul li p {fbackground:url (./images/ico3 32.jpg) left center no- repeat;font:12px/28px 宋体 ;color: 
# 666;pacdding:0 0 0 13px;} 

.nnewlist ul li pa {color:# 666;} 

.nnewlist ul li p a:hover {color:# 901919;} 


-Im {width:445px; float:left;} 

.rollpic fwidth:445pxzheight:132pxzpadding- top:@px;} 

# demp {background: # FFF;overflow:hidden;width: 445px;} 

# demp img {border: 3px solid # aaaaaa;margin:0 Grx;} 

# indemp {float: left;width: 800%;} 

# dempl {float: left;} 

# demo2 {float: left;} 

-mr {width:196rx;float:right;} 

-connectways {width:196re;height:138px;background:url (./images/imbg 29.jpg) no- repeat;} 
.Cplst {font:16px/16px 微软 雅 黑 ;color:# 524f46;padding- top:25px;padding- left:2px;} 
.GE2nd {font:24px/24px 微软 雅 黑 ;color:# 901919;padding- top:8px;padding- left:2px;} 


.guest_]ink fwidth:194peczheight:44pxzmargin top:19px;} 
.guest link a fdisplay:blockywidth:194pxzheight:44pxez]} 


下 44 建立 网 页 页 脚 区 域 


1 网 页 页 脚 区 域 HIML 结 构 


< div class= "footer"> 
<P class= "fpl"> Copyright2013 All Rights Reservedgnbsp;&nbsp; 版 权 所 有 grbsp;snbsp; 朝阳 区 弘 叶 美 
发 立信 街 店 < /p> 
<p class= "fp2"> < a href— "http://www-miitbeian.gov.cn/" target=" blank"> 吉 ICP 正 在 备案 中 < /a> 
gnbsp;&nbsp; gnbsp; 技术 支持 : <a href= "http://www.pangu.us" target="”blank" title= "盘古 网 络 - 提 
供 基于 互联 网 的 全 套 解决 方案 心 盘古 网 络 < /a>< /p> 

</div> 


2 网 页 页 脚 区 域 CSS 样式 


.footer {width:1002px; height.: 66px;margin:0 auto;border- top: solid lp # ababab;background: url (./images/ 
fooerbg 03.jpg) top right no- repeat;} 

.footer p {font:12px/12px Arial, Helvetica, sans- serif;oolor:# 666666;} 

“fpl {padding- top:16rx} 

“fr2 {padding- top: rx;} 

.footer pa {color:# 666;} 

.footer p a:hover {color:# 901919;} 


11.5 利用 jQuery 添加 网 页 特效 


1 加 载 jQuery 库 文件 及 其 插件 文件 


< script type= "text/javascript" src= "js/jquery- 1.7.2.min.js"> < /script> 
< script type= "text/javascript" src= "js/jqvery.soChange— min.js"> < /script> 


说 明 : soChange 基于 jQuery 对 象 切换 ,幻灯 切换 插件 。 
2 设计 导航 栏 和 产品 展示 动态 效果 


< script type= "text/javascript"> 
$ (function() { 
$ ('#change 3 .a_bigImg') .soChange({ 
thurbobj:# change 3 .ul change a2 span', 
thunbNowclass: 'on', // 自 定义 导航 对 象 当 前 class 为 on 
changeTime:4000 // 自 定义 切换 时 间 为 4000ms 


D; 
D; 
$ (".a_bigImg img") .width (window.innerWidtht ‘px'); 
fimction runpic mid, id1,id?2, spd) 


250 ， 


} 


{ Ey 


var speed- spd; /数字 越 大 速度 越 慢 
var tabr dooument .getElementById (mid) ; 
var tabl= dpcument.getElementByTd (id1); 
Var tab2- docurent .getElementById (id?); 
tab?2.innerHIMI= tabl .innerHIMD; 
finction Marquee () { 

if (tab?2.offsetWidth- tab.scrollIeft<=0) 

tab.scrollleft— = tabl .offsetWidth 

else{ 

tab.scrollIeft++ 7 

} 
} 
Var MyMar= setInterval (Marquee, speed); 
tab.onmpuseover- function() {clearInterval MyMar)}; 
tab.onmpuseout= functicn () {MyMar= setInterval Marquee, speed) }; 


runpic ("Gemo", "damplw "demo2", 30) ; 


$ ('# indemp img') .hover (function() { 


$ (this) .css ({'border': '3px solid #1Hb0010°}); 


},function(){ 


D; 


$ (this) .css ({ "border':'3x solid # aaaaaa'}); 


< /script> 


11.6 本 章 小 结 


本 章 通 过 介绍 美容 美发 公司 网 站 开发 过 程 ,掌握 企业 网 站 前 端 开发 流程 ,重点 掌握 网 页 
的 结构 .表现 和 行为 的 设计 与 制作 ,难点 是 利用 jQuery 进行 页 面 行为 特效 设计 。 通 过 本 章 
学 习 将 为 网 站 前 端 设 计 黄 定 必要 的 项 目 开 发 基础 。 
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